구성 요소를 기존 Vue.js 인스턴스에 등록합니다.

구성 요소를 기존 Vue.js 인스턴스에 등록합니다.

Vue.js는 처음입니다.

여기에 설명된 대로 로컬 구성 요소를 등록하고 싶습니다.

https://vuejs.org/v2/guide/components.html#Local-Registration

유일한 문제는 다음과 같은 새 인스턴스를 생성할 때 구성 요소를 기존 Vue 인스턴스에 등록하지 않아도 된다는 것입니다.

const app = new Vue({
    el: '#app'
});

app.component({
    'my-component': {
         template: '<div>A custom component!</div>'
    }
});

Vue.extend를 사용해 봤지만 동작하지 않습니다.

편집:

이것이 필요한 이유:

저는 그 부품을 포함하는 서드파티 패키지를 만들고 있습니다.이 패키지를 설치하는 프레임워크에는 이미 Vue.js와 Vue 인스턴스가 포함되어 있습니다.따라서 프레임워크의 JS 전에 패키지의 JS를 포함하면 Vue가 정의되지 않고 프레임워크의 JS 뒤에 패키지의 JS를 포함하면 Vue 인스턴스화 전에 등록해야 하므로 컴포넌트 오류가 발생합니다.

새 인스턴스를 구성하기 전에 글로벌 구성 요소를 선언해야 합니다.

Vue.component('my-component-a', {
  template: '<div>A custom component A!</div>'
});

Vue.component('my-component-b', {
  template: '<div>A custom component B!</div>'
});

const app1 = new Vue({
    el: '#app1',
    template: '<div><my-component-a /><my-component-b /><my-component-c /></div>',
    components: {
      MyComponentC: {
        template: '<div>A custom component C!</div>'
      }
    }
});

const app2 = new Vue({
    el: '#app2',
    template: '<div><my-component-b /><my-component-a /><my-component-c /></div>'
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app1"></div>
<div id="app2"></div>

앱2 내에서 C 컴포넌트에 액세스할 수 없습니다.

이러한 인스턴스에는 구성 요소를 추가할 수 없습니다.Vue 컨스트럭터에 추가할 수 있는 작업은 다음과 같습니다.

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

const app = new Vue({
    el: '#app'
});

데모를 보시기 바랍니다.https://jsfiddle.net/Linusborg/kb9pbecq/

const app = new Vue({
  el: '#app',
  components: {
    'my-component': {template: '<div>Text in component</div>'}
   }
});

기본적으로 이미 렌더링된 구성 요소는 기존 Vue 인스턴스에 등록할 수 없습니다.그러나 Vue 인스턴스가 dom 요소에 마운트되기 전에 구성 요소를 등록할 수 있습니다.

// local component
var child = {
  template: '<div>A custom component!</div>'
}

const app = new Vue({
   el: '#app',
   components: {
     Child: child
  }
})

또는

// global component
Vue.component({
 'child': {
   template: '<div>A custom component!</div>'
 } })

컴포넌트를 먼저 정의하고 구현합니다.

언급URL : https://stackoverflow.com/questions/45481822/register-a-component-to-an-existing-vue-js-instance