Question

在我的SectionComponent.vue文件中，如何获取我导入的组件的实例？

import ButtonComponent from './ButtonComponent.vue';

要获得它的实例，我想做这样的事情：

buttonComponent = Vue.component(ButtonComponent);

我的组件数组中列出/定义了我的组件为ButtonComponent所以理论上我应该说：

let buttonComponent = Vue.component('button-component');

但这给了我未定义的。是什么给了什么？

如果我在全局注册然后获取实例，它确实有效。

安装不是测试此代码的正确位置？我的挂载方法是在导入之前触发的吗？我只想在这里找一点清晰，如果有人可以解释我会很感激！

Answer 1

Vue是一个声明性框架，意味着你并不是必须要做的事情。相反，你将模板表示为状态的表示，然后Vue为你处理DOM操作。

以下是基于您所描述的内容的示例。

＆＃13;

cf push

＆＃13;

console.clear()
Vue.component("button-component", {
  // identifier is just a property telling us which button this is so we 
  // can distinguish between them
  props:["identifier"],
  template: `<button @click="onClick">I'm button {{identifier}}</button>`,
  methods: {
    onClick() {alert(this.identifier)}
  }
})

new Vue({
  el: "#app",
  data:{
    howManyButtons: 0
  },
  methods: {
    onAddButton(){
      this.howManyButtons++
    }
  }
})

＆＃13;

在上面的例子中，我们想根据＆＃34;添加按钮＆＃34;多少次来渲染一些按钮。按钮已被点击。为此，我们只需在单击按钮时递增计数器。然后在模板中，我们使用<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <div id="app"> <button @click="onAddButton">Add a button component</button> <hr> <button-component v-for="btn in howManyButtons" :identifier="btn" :key="btn"> </button-component> </div>的{{3}}来渲染那么多按钮。

v-for

希望这清楚地表明我们告诉Vue向DOM添加按钮是没有意义的。我们只是在模板中描述我们想要的计数器中有多少个按钮。

Answer 2

import ButtonComponent from './ButtonComponent.vue'

SectionComponent.vue组件内部

export default {
  components: { ButtonComponent },
  // Whatever else you have in here
  data() { return {} },
  computed: {}
}

如何从组件内部获取Vue组件的实例

2 个答案: