摘要

在使用一個元件之前，必須先讓 Vue 知道它的存在，這個過程稱為「註冊」。註冊分為「全域註冊」和「局部註冊」兩種方式。

定義與說明

全域註冊 (Global Registration)：

在 Vue 應用程式實例上註冊的元件，可以在應用的任何地方直接使用，無需再次引入。適合非常常用的基礎元件（如按鈕、輸入框）。

局部註冊 (Local Registration)：

在需要使用它的父元件的 <script> 區塊中引入並註冊。該元件只能在該父元件的模板中使用。這是更推薦、更常見的做法。

實作範例

全域註冊 (在 main.js 中)

// --- 全域註冊 (在 main.js 中) ---
import { createApp } from 'vue';
import App from './App.vue';
import GlobalButton from './components/GlobalButton.vue';

const app = createApp(App);
app.component('GlobalButton', GlobalButton); // 註冊
app.mount('#app');

局部註冊 (在 Parent.vue 中)

<script setup>
import LocalCard from './components/LocalCard.vue'; // 1. 引入
// 2. 在 <script setup> 中，引入後即可直接使用，無需額外註冊步驟
</script>

<template>
  <LocalCard />
</template>

結論

優先使用局部註冊。它能讓打包工具更好地進行「搖樹優化」(Tree-shaking)，移除未使用的元件，減小最終打包體積。只對極少數、無處不在的基礎元件考慮使用全域註冊。

全域註冊局部註冊 Tree-shaking