Vue 的元件 ( component ) 是建立可重複使用、模組化 UI 的基礎，今天就來一探究竟吧！

元件是什麼？

Vue 的實體 ( instance ) 是由元件 ( component ) 所組成，可以將邏輯、模板、樣式封裝在同一檔案 ( 稱作單一檔案元件 SFC )，以便於維護與重複使用，此外多個元件單元可以組合成元件樹，一個 Vue 應用是由許多元件組成的樹狀結構，樹狀結構最上層是根元件 <Root>，其下層包含 <Header>、 <Main> 、 <Aside>等子元件。

如何使用元件？

若要使用子元件，需要在父元件中導入該子元件，而在 <script setup> 語法中，子元件只要透過 import 導入，便可以在模板中直接使用。

以下是官方文件的範例 ( Composition API )

使用<script setup>語法糖，可以讓程式碼看起來更簡潔。

<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>

以下是官方文件的範例 ( Options API )

<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
  components: {
    ButtonCounter
  }
}
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>

此外還可以透過註冊元件來使用元件，分為以下兩種方式：

1.全域註冊

透過使用.component( )方法來註冊元件，便可以在目前應用中的任何元件上使用，而無需額外導入，由於沒有被使用的元件無法在生產打包時被自動移除 ( tree-shaking )，使得註冊的元件不論是否有被使用，其元件都會被打包在JS檔案裡，導致載入網頁緩慢也影響效能，而且若是用在大型專案中，元件的依賴關係變得不明顯，可能會造成不好維護的問題。

2.局部註冊

在父元件中導入子元件，而且只能在該父元件中使用，並於 components 選項中註冊或使用 <script setup> 直接導入，因為只有在需要的地方使用，使得打包時更有效率，也能清楚表達元件間的依賴關係。

參考資源

https://zh-hk.vuejs.org/guide/essentials/component-basics.html
https://medium.com/pierceshih/vue-js-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-day15-vue-component-%E5%85%83%E4%BB%B6%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-a414e2333e2b
https://book.vue.tw/CH2/2-1-components.html
https://zh-hk.vuejs.org/guide/components/registration.html