从全局范围访问定义的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 Dev Tools正在做的是扫描DOM以查找Vue的根级实例。

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

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

Answer 2

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

this.$options.components.MyComponent

或：

this.$options.components['MyComponent']

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