EP21 - 組件註冊

更新於 2024/09/29發佈於 2024/09/29閱讀時間約 1 分鐘

看完六個基礎範例之後，我打算繼續看一些Guide內容再繼續做Examples
Component Registration，開使要深入探討組件的內容摟！！！
有時候翻譯是組件或者元件～大家都記得英文是Component !!!

Vue 組件需要進行「註冊」，以便在模板中遇到組件時，Vue 知道在哪裡找到其實現。註冊組件有兩種方式：全局註冊和局部註冊。

全局註冊 - Global Registration

可以使用 .component() 方法在當前的 Vue 應用程式中全局註冊組件，使其可用：

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 註冊的名稱
  'MyComponent',
  // 組件實現
  {
    /* ... */
  }
)

如果使用單文件組件（SFCs），你將會註冊導入的 .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> 組件。
- 這樣可以保證在整個應用中隨時使用這些組件。
非常頻繁使用：
- 當一個組件在應用的多個地方都需要使用時，全局註冊可以避免重複的局部註冊代碼。

局部註冊

將組件的作用範圍限制在當前組件內，這種方式適合於那些特定上下文中使用的組件，例如：

特定功能的組件：
- 某些組件只在特定頁面或功能中使用，這種情況下使用局部註冊會更合適，這樣可以明確其依賴關係。
- 例如，在一個特定的表單頁面中使用的日期選擇器組件，不需要全局註冊，僅在這個表單頁面內部註冊即可。
提高可維護性：
- 局部註冊可以使代碼更易於理解和維護，因為依賴關係在組件內部更明確。
- 例如，在大型應用中，如果每個頁面或功能模塊內部都局部註冊所需的組件，那麼修改和調試時就可以更方便地追溯每個組件的來源。
避免命名衝突：
- 當應用中有多個開發者合作時，局部註冊可以避免全局命名空間的污染和命名衝突。