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

【问题标题】：Access Defined Vue Components from the Global Scope从全局范围访问定义的 Vue 组件
【发布时间】：2017-06-26 16:42:48
【问题描述】：

使用 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 插件）技能太弱，无法戳穿他们在调试器插件中所做的事情）。

【问题讨论】：

你在找什么？在大多数生命周期事件中，您可以检查 this 并看到组件本身。
@BertEvans 感谢您的关注！如果我的上下文有帮助：我致力于开发人员工具。除了我所说的我正在寻找的东西之外，我没有寻找任何东西——一种从全局 javascript 范围访问实例化组件对象的方法。
从全局范围内，您可以捕获 Vue 构造函数 (const app = new Vue(...)) 的结果，然后您可以从那里深入了解完整的组件树，尽管它没有很好的文档记录。
@BertEvans 再次感谢——但我希望在运行时以及在我不控制 vue 构造函数的实例化的应用程序中访问这些信息。有用的信息！

【解决方案1】：

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

this.$options.components.MyComponent

或：

this.$options.components['MyComponent']

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

【讨论】：

【解决方案2】：

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

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

一旦你有了一个根，你应该能够遍历它的属性（比如$children）来查找组件的实例。

【讨论】：