vue.js 中定義組件有三種方法：直接定義在 <script> 標(biāo)簽中并導(dǎo)出組件對象、使用組件工廠函數(shù)和 definecomponent 輔助函數(shù)創(chuàng)建、使用類定義組件并繼承 vue.extend 創(chuàng)建。</script>
如何在 Vue.js 中定義組件
一、直接定義
在 <script></script> 標(biāo)簽中，使用 export default {} 導(dǎo)出組件對象：
<code class="html"><script>
export default {
// 組件內(nèi)容
}
</script></code>
登錄后復(fù)制
在 <template></template> 標(biāo)簽中，定義組件布局：
<code class="html"><template><div>組件內(nèi)容</div> </template></code>
登錄后復(fù)制
二、使用組件工廠函數(shù)
創(chuàng)建一個工廠函數(shù)，并使用 defineComponent 輔助函數(shù)：
<code class="javascript">import { defineComponent } from 'vue'
export default defineComponent({
// 組件內(nèi)容
})</code>
登錄后復(fù)制
組件布局與上述直接定義方式相同。
三、使用類定義組件
繼承 Vue.extend 創(chuàng)建一個類：
<code class="javascript">import Vue from 'vue'
export default class MyComponent extends Vue {
// 組件內(nèi)容
}</code>
登錄后復(fù)制
注冊組件：
<code class="javascript">// 在 Vue 實例中 this.$options.components.MyComponent = MyComponent</code>
登錄后復(fù)制
