Details
我正在一个具有不同页面设置的网站上工作。
我的设置不是 SPA，因此我没有单个根实例的 privalige。
问题
这意味着，如果我创建一个组件，我必须在每次想要使用我的组件时注册一个根 vue 实例。
问题示例
我将自定义组件创建为全局组件：
Vue.component('mycomponent', { /* options */ });
根据 vue 文档，我必须注册一个根实例才能使用我的组件
new Vue({ el: '#root-instance' });
<div class="header" id="root-instance">
<mycomponent></mycomponent>
</div>
然后在不同的部分中，我想使用相同的组件，但我必须创建另一个根实例：
new Vue({ el: '#other-root-instance' });
<div class="sidebar" id="other-root-instance">
<mycomponent></mycomponent>
</div>
我尝试使用一个类来实例化，如下所示：
new Vue({ el: '.root-instance' });
但是视图只加载一次。
问题
有没有办法加载组件但不在每次使用时实例化根实例？
注意：我在页面上有多个根实例，因此无法为页面声明单个根实例。实际上，我不想使我的页面成为单页应用程序。
您不必将组件包装在根实例div 中，您可以将组件标记为根实例。
Vue.component('myComponent', {
props: ['custom'],
template: '<div>Hi there, I am the {{custom}}</div>'
});
new Vue({
el: '#sidebar'
});
new Vue({
el: '#topmenu'
});<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<my-component id="sidebar" custom="sidebar"></my-component>
<div>
Some stuff that is not under Vue control {{custom}}
</div>
<my-component id="topmenu" custom="top menu"></my-component>