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()混合，并在那里保留此计数逻辑。

此外，我想知道为什么您可能需要这个。除非您正在尝试，否则我认为这样做并不是真正的必要。

VueJS-页面上所有vue实例的清单

1 个答案: