如何在不实例化根实例的情况下使用vue组件？

Question

详细

我正在使用不同页面设置的网站。

我的设置是不是SPA ，因此我没有单个根实例的私有权。

问题

这意味着如果我创建一个组件，每次我想使用我的组件时都必须注册一个root 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' });

但是视图只加载一次。

问题

是否有任何方法可以加载组件，但每次使用时都不会实例化根实例？

注意：我在页面上有几个根实例，因此无法为页面声明单个根实例。实际上，我不想让我的页面成为单页应用程序。

Answer 1

您不必将组件包装在根实例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>