루트 인스턴스를 인스턴스화하지 않고 vue 구성 요소를 사용하는 방법은 무엇입니까?

루트 인스턴스를 인스턴스화하지 않고 vue 구성 요소를 사용하는 방법은 무엇입니까?

세부 사항

저는 다른 페이지 설정으로 웹사이트를 만들고 있습니다.

설정이 SPA가 아니기 때문에 단일 루트인스턴스의 권한이 없습니다.

문제

즉, 구성 요소를 생성할 경우 구성 요소를 사용할 때마다 루트 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>

언급URL : https://stackoverflow.com/questions/42928643/how-do-i-use-a-vue-component-without-instantiating-a-root-instance