从全局范围访问定义的 Vue 组件

Question

使用 Vue.js，是否可以从全局 javascript 范围访问实例化的 Vue.js 组件对象？还是 Vue 的内部以无法访问的方式实例化对象？

即我有定义组件的代码

Vue.component('component-name', {
   /*...*/
});

然后标签使用该组件

<component-name>
    /* can user templates with component objects vars {{foo}}
</component-name>

Vue 的模板渲染代码最终是访问一个 javascript 对象。我有办法通过代码查看那个实例化的 Vue 组件对象吗？像

var theComponent = getInstantiatedComponent('component-name');

我知道 Vue.js Chrome 调试器 -- 但我想知道是否可以通过代码访问这些对象 ，以及该语法是什么（我的 Chrome 插件技能太弱，无法了解他们在调试器插件中所做的事情）。

Answer 1

看起来 Vue 开发工具正在扫描 DOM 以查找 Vue 的根级实例。

查看扫描功能here。本质上，它会查看页面上的元素，试图找到带有属性 __vue__ 的元素。它从那里做出几个决定来确定它是否是根实例。

获得根后，您应该能够遍历它的属性（如 $children）以查找组件实例。

Answer 2

可以使用任何其他组件访问任何全局注册的 Vue 组件：

this.$options.components.MyComponent

或：

this.$options.components['MyComponent']

如果在当前组件内部没有找到MyComponent，JS会在原型链中搜索，直到找到（或找不到），最后一步是注册所有全局组件的根Vue实例原型。

Access Defined Vue Components from the Global Scope