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

Question

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

import ButtonComponent from './ButtonComponent.vue'; 

要获取它的一个实例，我想做这样的事情:

buttonComponent = Vue.component(ButtonComponent);

我在我的组件数组中列出/定义了我的组件作为 ButtonComponent 所以理论上我应该能够说:

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

但这给了我不确定性。给了什么？

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

mounted 不是测试此代码的正确位置吗？我的安装方法在导入之前被触发了吗？我只是想在这里弄清楚一点，如果有人能解释一下，我将不胜感激!

Answer 1

Vue 是一个声明式框架，这意味着您并不是真正地命令式地做事。相反，您将模板表述为状态的表示，然后 Vue 会为您处理 DOM 操作。

这是一个基于您所描述的您想要执行的操作的示例。

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++
    }
  }
})

<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>

在上面的示例中，我们希望根据“添加按钮”按钮被点击的次数来呈现多个按钮。为此，我们只需在单击按钮时增加一个计数器。然后在模板中我们使用 range variant v-for 来渲染那么多按钮。

<button-component v-for="btn in howManyButtons"
                  :identifier="btn"
                  :key="btn">
</button-component>

希望这可以清楚地表明我们告诉 Vue 向 DOM 添加按钮是没有意义的。我们只是在模板中描述我们想要的按钮数量与我们柜台中的按钮数量一样多。