看完六個基礎範例之後，我打算繼續看一些Guide內容再繼續做Examples
Component Registration，開使要深入探討組件的內容摟！！！
有時候翻譯是組件或者元件～大家都記得英文是Component !!!
Vue 組件需要進行「註冊」，以便在模板中遇到組件時，Vue 知道在哪裡找到其實現。註冊組件有兩種方式：全局註冊和局部註冊。
全局註冊 - Global Registration
可以使用 .component() 方法在當前的 Vue 應用程式中全局註冊組件，使其可用：
import { createApp } from 'vue'如果使用單文件組件（SFCs），你將會註冊導入的
const app = createApp({})
app.component(
// 註冊的名稱
'MyComponent',
// 組件實現
{
/* ... */
}
)
.vue 文件：import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)
.component() 方法可以進行鏈式調用：
app
.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)
全局註冊的組件可以在此應用程式中的任何組件模板中使用：
<template>
<!-- 這可以在應用程式內的任何組件中工作 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>
</template>
這甚至適用於所有子組件，意味著這三個組件也可以在彼此內部使用。
局部註冊 - Local Registration
雖然全局註冊很方便，但也有一些缺點：
全局註冊會阻止構建系統移除未使用的組件（即 "tree-shaking"）。如果你全局註冊了一個組件但在應用中未使用，它仍會包含在最終的包中。
全局註冊使大型應用中的依賴關係不夠明確。它使得從使用該組件的父組件中定位子組件的實現變得困難。這會影響長期的可維護性，類似於使用太多全局變量。
局部註冊將註冊組件的可用性僅限於當前組件。這使得依賴關係更加明確，而且更有利於 tree-shaking。
在使用 <script setup> 的單文件組件（SFC）中，導入的組件可以在本地使用而不需要註冊：
<script setup>
import ComponentA from './ComponentA.vue'
</script>
<template>
<ComponentA />
</template>
在非 <script setup> 中，你需要使用 components 選項：
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}
對於 components 對象中的每個屬性，鍵將是組件的註冊名稱，而值將包含組件的實現。上述示例使用的是 ES2015 屬性簡寫，等同於：
export default {
components: {
ComponentA: ComponentA
}
// ...
}
請注意，本地註冊的組件在後代組件中不可用。在這種情況下，ComponentA 只會在當前組件中可用，而不是其任何子組件或後代組件中。
組件名稱大小寫 - Component Name Casing
在整個指南中，我們使用 PascalCase 名稱來註冊組件。原因如下：
- PascalCase 名稱是有效的 JavaScript 標識符。這使得在 JavaScript 中導入和註冊組件變得更容易，也有助於 IDE 的自動完成功能。
<PascalCase />使得在模板中這是一個 Vue 組件而不是原生 HTML 元素更加明顯。它還區分了 Vue 組件和自定義元素（網頁組件）。
這是使用 SFC 或字符串模板時推薦的樣式。然而，如在 DOM 模板解析注意事項中所討論的，PascalCase 標籤在 DOM 模板中不可用。
幸運的是，Vue 支援將 kebab-case 標籤解析為使用 PascalCase 註冊的組件。這意味著註冊為 MyComponent 的組件可以在模板中通過 <MyComponent> 和 <my-component> 引用。這允許我們無論模板來源如何，都可以使用相同的 JavaScript 組件註冊代碼。
介紹了全局註冊跟局部註冊，回想起前幾天學的範例，都是使用局部註冊呢！
什麼時候才會用到全局註冊呢？什麼時候適合局部註冊？
組件註冊情境
在 Vue 中，全局註冊和局部註冊各有其適用的情境。下面是一些適合使用全局註冊和局部註冊的情況。
全局註冊
會使組件在整個應用中都可用。這種方式適合於那些在多個地方頻繁使用的組件，例如：
- 通用組件：
- 像是按鈕、表單輸入框、模態框等，在整個應用中多處使用的通用組件非常適合全局註冊。
- 例如，設計一個應用內部統一風格的按鈕組件，這樣就可以在任何地方使用
<MyButton />，而不需要每次都進行局部註冊。
- 插件組件：
- 一些 Vue 插件提供的組件通常會全局註冊，例如 Vue Router 的
<router-link>和<router-view>組件。 - 這樣可以保證在整個應用中隨時使用這些組件。
- 一些 Vue 插件提供的組件通常會全局註冊，例如 Vue Router 的
- 非常頻繁使用：
- 當一個組件在應用的多個地方都需要使用時，全局註冊可以避免重複的局部註冊代碼。
局部註冊
將組件的作用範圍限制在當前組件內，這種方式適合於那些特定上下文中使用的組件，例如：
- 特定功能的組件：
- 某些組件只在特定頁面或功能中使用，這種情況下使用局部註冊會更合適，這樣可以明確其依賴關係。
- 例如，在一個特定的表單頁面中使用的日期選擇器組件，不需要全局註冊，僅在這個表單頁面內部註冊即可。
- 提高可維護性：
- 局部註冊可以使代碼更易於理解和維護，因為依賴關係在組件內部更明確。
- 例如，在大型應用中，如果每個頁面或功能模塊內部都局部註冊所需的組件，那麼修改和調試時就可以更方便地追溯每個組件的來源。
- 避免命名衝突：
- 當應用中有多個開發者合作時，局部註冊可以避免全局命名空間的污染和命名衝突。
