Vue组件内部如何获取已导入组件的实例？

这问题我之前也碰到过，其实核心是全局注册和局部注册的区别在搞鬼，咱们一步步拆解：

为什么Vue.component('button-component')返回undefined？ #

你现在是把ButtonComponent局部注册在SectionComponent的components数组里，而Vue.component()这个方法是用来做两件事：

• 全局注册组件：Vue.component('button-component', ButtonComponent)
• 获取全局注册的组件构造器

因为你的组件只在SectionComponent内部可用，并没有注册到Vue的全局组件注册表中，所以调用Vue.component('button-component')自然拿不到东西，返回undefined。但这不影响组件正常渲染——毕竟局部注册已经让父组件能识别它了。

正确获取组件实例的两种方法 #

方法一：用ref（最常用，适合模板中渲染的组件） #

在模板里给ButtonComponent加上ref标识：

<template>
  <div>
    <ButtonComponent ref="myButtonRef" />
  </div>
</template>

然后在SectionComponent的生命周期钩子（比如mounted，确保组件已挂载）中获取实例：

<script>
import ButtonComponent from './ButtonComponent.vue';

export default {
  components: { ButtonComponent },
  mounted() {
    const buttonInstance = this.$refs.myButtonRef;
    // 现在你可以调用buttonInstance的方法、访问它的data/props了
    console.log(buttonInstance);
  }
}
</script>

⚠️ 注意：$refs是在组件挂载完成后才填充的，所以不要在created钩子中去拿，那时组件还没渲染到DOM上。

方法二：手动创建组件实例（适合动态生成组件的场景） #

如果需要不在模板里预先写组件，而是手动创建实例，可以用Vue.extend：

<script>
import Vue from 'vue';
import ButtonComponent from './ButtonComponent.vue';

export default {
  components: { ButtonComponent },
  mounted() {
    // 创建组件构造器
    const ButtonConstructor = Vue.extend(ButtonComponent);
    // 实例化，可选绑定父组件上下文
    const buttonInstance = new ButtonConstructor({
      parent: this,
      propsData: { 
        // 如果组件有props，可以在这里传递
        label: 'My Button'
      }
    });
    // 挂载到指定DOM元素（可选，不挂载的话实例也存在但不会显示）
    buttonInstance.$mount('#button-container');
    console.log(buttonInstance);
  }
}
</script>

内容的提问来源于stack exchange，提问作者Kevin Pimentel