Vue.js 2: .vue 파일에서 Vue 컴포넌트를 초기화(구성)하는 방법

Vue.js 2: .vue 파일에서 Vue 컴포넌트를 초기화(구성)하는 방법

컴포넌트 인스턴스를 작성하려고 합니다.

App.vue

import MyComponent from './components/MyCompnent.vue';
export default {
    mounted() {
        // The following line fails.
        const vm = new MyComponent();
        vm.$mount('#some-place');
    }
}

및 그newline이 오류를 보고합니다.

Uncaught TypeError: MyComponent.default는 생성자가 아닙니다.

컴포넌트를 작성하려면 어떻게 해야 하나요?

마침내, 매우 간단한 해결책을 스스로 찾았습니다.

그ComponentImport된 자체는 컨스트럭터가 아니지만 컨스트럭터를 쉽게 만들 수 있습니다.

import MyComponent from './components/MyCompnent.vue';
const MyComponentConstructor = Vue.extend(MyComponent);

최종 솔루션은 다음과 같습니다.

import MyComponent from './components/MyCompnent.vue';
export default {
    mounted() {
        const MyComponentConstructor = Vue.extend(MyComponent);
        const vm = new MyComponentConstructor();
        vm.$mount('#some-place');
    }
}

다른 컴포넌트 내부에 컴포넌트를 등록하는 방법은 다음과 같습니다.

export default {
  el: '#some-place'
  components: {
      'my-component'
  }
}

문서: 링크

편집: VM 인스턴스 생성 방법

VM 인스턴스를 초기화하려면 Vue.extend를 사용하여 초기화할 수 있습니다.의 역할은 다음과 같습니다.

기본 Vue 생성자의 "하위 클래스"를 생성합니다.인수는 구성 요소 옵션을 포함하는 개체여야 합니다.

여기서 주의할 점은 다음과 같습니다.

여기서 주의할 특별한 경우는 데이터 옵션입니다.Vue.extend()와 함께 사용할 경우 이 옵션은 함수여야 합니다.

코드를 다음과 같이 변경해야 합니다.

import MyComponent from './components/MyCompnent.vue';
const vmClass = Vue.extend(MyComponent)
const vm = new MyComponent();
vm.$mount('#some-place');

이거 드셔보세요

스크립트:

import MyComponent from './components/MyCompnent.vue';

export default {
    name : 'comp',
    components :{
      MyComponent
    }  
  }

Html 이렇게 컴포넌트를 html로 호출할 수 있습니다.

<template>
<mycomponent></mycomponent>
</template>

언급URL : https://stackoverflow.com/questions/40905292/vue-js-2-how-to-initializeconstruct-a-vue-component-from-a-vue-file