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