全局與局部組件註冊

在 Vue 3 中，組件註冊是將組件告訴 Vue 應用，讓它們可以在模板中被使用的過程。組件註冊可以分為兩種方式：全局組件註冊和局部組件註冊。

1. 全局組件註冊

全局組件註冊是將組件註冊為應用中所有組件的全局組件，這樣你可以在應用的任何地方使用該組件，而不需要在每個組件中單獨引入。

全局組件註冊範例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue'; // 引入組件

const app = createApp(App);

// 全局註冊組件
app.component('MyComponent', MyComponent);

app.mount('#app');

在這個範例中：

• MyComponent 組件在 main.js 中被全局註冊，這樣應用中的任何地方都可以使用 <MyComponent />。
• 使用 app.component() 方法來註冊組件，第一個參數是組件名稱，第二個參數是組件本身。

使用全局註冊組件：

<template>
  <div>
    <MyComponent />
  </div>
</template>

全局註冊的組件可以直接在任何模板中使用，無需再次導入或註冊。

優缺點：

• 優點：簡單方便，所有組件都可以訪問這些全局組件。
• 缺點：如果應用變得很大，註冊大量的全局組件可能會導致全局命名衝突，並且無需的組件也會被加載，影響性能。

---

2. 局部組件註冊

局部組件註冊則是在某個特定組件中引入並使用其他組件，這樣該組件只對當前組件可見，不會在整個應用中可用。

局部組件註冊範例：

// ParentComponent.vue
<template>
  <div>
    <h1>這是父組件</h1>
    <MyComponent /> <!-- 使用局部註冊的組件 -->
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'; // 引入組件

export default {
  components: {
    MyComponent, // 局部註冊組件
  },
};
</script>

在這個範例中：

• MyComponent 被引入並在 ParentComponent 中局部註冊。
• 通過 components 選項來將組件註冊為當前組件的局部組件。
• MyComponent 只能在 ParentComponent 的模板中使用，而無法在其他地方使用。

優缺點：

• 優點：避免全局命名衝突，僅在需要的地方加載組件，有助於優化性能。
• 缺點：需要在每個使用組件的地方進行註冊，會稍微增加代碼量。

---

3. 選擇全局註冊還是局部註冊

• 全局組件註冊 適合那些頻繁使用且在應用的多個部分中重複使用的組件。例如，應用中的常用 UI 組件（按鈕、表單等）可以全局註冊。
• 局部組件註冊 適合那些僅在某些特定地方使用的組件。這樣的註冊方式可以避免全局命名空間污染，並且有助於優化性能，因為組件只會在需要的地方被加載。

---

4. 自動化全局組件註冊

當應用變得複雜時，手動一個個註冊全局組件可能會變得繁瑣。Vue 3 支持通過 require.context 自動化註冊全局組件。

自動全局註冊範例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 自動全局註冊來自 components 資料夾的所有組件
const requireComponent = require.context('./components', true, /\.vue$/);

requireComponent.keys().forEach((fileName) => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName
    .split('/')
    .pop()
    .replace(/\.\w+$/, '');

  app.component(componentName, componentConfig.default || componentConfig);
});

app.mount('#app');

在這個範例中：

• 使用 require.context 自動加載 components 資料夾中的所有 .vue 組件，並將它們全局註冊。
• 這樣可以大大簡化多個全局組件的註冊過程。

---

總結

• 全局組件註冊 使得組件可以在整個應用中使用，適合頻繁使用的組件，但需要小心命名衝突。
• 局部組件註冊 僅在需要的地方註冊和使用組件，適合一次性或少量使用的組件，這樣可以優化性能。
• 在大型應用中，根據具體場景選擇合適的組件註冊方式，並考慮自動化註冊工具來簡化開發流程。