Vue组件上下文中如何获取import导入的组件对象？

我正好有一个可行的方案来解决这个问题——你已经摸到了正确的方向，咱们来拆解一下细节：

首先你遇到的getComponent箭头函数返回undefined的核心原因是：箭头函数不会绑定自己的this，它的this是从定义时的外层作用域继承来的。在这里外层是模块的全局作用域，并不是组件实例的上下文，所以this指向的不是组件实例，自然返回undefined。

而你已经发现的正确方式，就是把组件选项对象赋值给一个命名变量，之后在组件的方法里直接引用这个变量，就能拿到你需要的那个从.vue文件import时得到的组件定义对象。

完整的代码示例如下：

const component = {
  methods: {
    displayItem () {
      console.log('组件实例', this) // 这里的this是组件被实例化后的实例对象
      console.log('组件定义对象', component) // 这就是你需要的、import时会拿到的对象
    },
  },
}
export default component

这里需要明确区分两个关键对象：

• component变量存储的是你编写的组件选项对象，也就是其他文件import这个.vue文件时得到的对象
• this在组件方法里指向的是组件被实例化后的实例对象，它是基于组件定义对象创建出来的，包含了响应式数据、生命周期钩子的上下文等专属实例的内容

内容的提问来源于stack exchange，提问作者Yauheni Prakopchyk