Vue.js 2：如何從 .vue 文件初始化（構造）一個 Vue 組件？

Question

我正在嘗試創建一個組件實例：

App.vue

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

並且new行報錯：

未捕獲的 TypeError：MyComponent.default 不是構造函數

那么如果我想創建組件呢？

Answer 1

最后，我自己找到了解決方案，非常簡單：

導入的Component本身不是構造函數，但我們可以很容易地做一個構造函數：

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');
    }
}

Answer 2

以下是在其他組件中注冊組件的方法：

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

文檔： 鏈接

編輯：如何創建虛擬機實例

如果要初始化 vm 實例，可以使用Vue.extend來完成。 什么是：

創建基本 Vue 構造函數的“子類”。 參數應該是一個包含組件選項的對象。

這里需要注意的一點是：

這里要注意的特殊情況是 data 選項 - 當與 Vue.extend() 一起使用時，它必須是一個函數。

您需要在代碼中進行類似於以下的更改：

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

Answer 3

嘗試這個

腳本 ：

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

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

Html你可以像這樣在 html 中調用你的組件

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