vue.js - VueJS - 页面上所有 vue 实例的列表

Question

很简单，给定如下代码，混合了 new Vue() 实例和组件，我如何列出页面上的所有 Vue 实例，以及该列表是什么样的？

<div id="instance1">
{{ name }}
</div>
<div id="instance2">
{{ name }}
</div>
<my-component id="some-element"></my-component>

Javascript:

new Vue({
  el: '#instance1',
  data: {
    name: 'Sammy',
  }
});

new Vue({
  el: '#instance2',
  data: {
    name: 'Bobby',
  }
});

Vue.component('my-component', {
  data: function(){
    return {
      name: 'Mark',
    }
  },
  template: '<div>Hello: {{ name }}</div>',
});

Answer 1

你真的不能那样做。您必须自己维护柜台。这意味着您必须将每次调用都包装到 new Vue() 中，例如:

let counter = 0;
const rootVueComponents = [];

function makeRootInstance(el, data) {
    const instance = new Vue(el, data);

    rootVueComponents.push(instance);
    counter++;

    return instance;
}

同样，这只会为您提供根 Vue 实例列表。如果您有一个组件层次结构，那么它将不起作用。

最后，如果您真的希望拥有所有组件的列表，则为所有 Vue 组件创建一个全局 created() 混合宏并在那里维护此计数逻辑。

此外，我想知道您为什么需要这个。当然，除非您正在试验，否则我认为没有必要这样做。