Vue Component

Vue 元件 (Component) 是 Vue 框架的核心概念之一，它提供了 HTML DOM 元素的擴充性，可以將 HTML、CSS 和 JavaScript 組合成一個可重用的組件。使用元件可以幫助我們將應用程式分解成更小的、更容易管理的部分，這可以提高程式碼的可讀性、可維護性和可重用性。

Vue 元件可以通過兩種方式註冊：全域註冊和區域註冊，今天就要來和大家介紹這兩種方式的使用方法和時機，那我們開始吧～

區域註冊

區域註冊是在 Vue 實例的 components (有 s哦！) 選項中註冊元件。只有在該 Vue 實例中才能使用該元件。

// Vue 3.x
// 建立一個新的根實體(app)
const app = Vue.createApp({
// 在 components 屬性內註冊子元件 my-component:
	components: {
		'my-component': {
			//自定義名稱: 組件內容
			template: '<div><h1>Hello, my component!</h1></div>',
		}
	}
});
app.mount('#app');

<div id="app">
	<h3>Root Instance</h3>
	<!-- 在根實體使用自訂元件 -->
	<my-component></my-component>
</div>

區域註冊只能在綁定的實體內使用。以此範例為例，此元件綁定在 #app，因此若同一頁面上有另一個 Vue 實例（例如 #app2），my-component 就不能被掛載到 #app2 中。

全域註冊

全域註冊是直接在 Vue 中註冊元件。在整個 Vue 應用程式中都可以使用該元件。

// Vue 3.x
// 建立一個新的根實體(app)
const app = Vue.createApp({});
// 將新建立的元件註冊在 app 這個根實體(根元件)
app.component('my-component', { 
	template: '<div><h1>Hello, my component!</h1></div>',
});
// 掛載到 id 為 'app' 的 DOM 的元素上
app.mount('#app');

<div id="app">
    <!-- 使用 my-component 组件 -->
    <my-component></my-component>
</div>

結語

在全域註冊中，不論是否在特定頁面或組件中使用該元件，其元件都會被預先載入，可能會影響網頁的載入性能。因此，如果元件只需要在特定的 Vue 實例中使用，通常會使用區域註冊。如果元件需要在整個 Vue 應用程式中使用，則可以使用全域註冊。