元件註冊 ​

本頁假設您已經閱讀了元件基礎。如果您是元件的新手，請先閱讀。

Vue元件需要“註冊”，以便Vue在遇到模板時知道其實現的位置。註冊元件有兩種方式：全域性和本地。

全域性註冊 ​

我們可以使用.component()方法在當前Vue應用中全域性提供元件

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // the registered name
  'MyComponent',
  // the implementation
  {
    /* ... */
  }
)

如果使用SFC，您將註冊匯入的.vue檔案

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

.component()方法可以鏈式呼叫

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

全域性註冊的元件可以在應用中任何元件的模板中使用

<!-- this will work in any component inside the app -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

這甚至適用於所有子元件，這意味著這三個元件也將彼此內部可用。

本地註冊 ​

雖然方便，但全域性註冊有一些缺點

1. 全域性註冊阻止構建系統刪除未使用的元件（稱為“搖樹最佳化”）。如果您全域性註冊了一個元件，但最終在任何地方都沒有使用它，它仍然會被包含在最終的包中。

2. 全域性註冊使大型應用中的依賴關係更不明確。這使得從父元件中查詢使用子元件的實現變得困難。這可能會影響長期的維護，類似於使用過多的全域性變數。

本地註冊將註冊元件的可用性限制在當前元件。這使得依賴關係更明確，並且更友好地支援“搖樹最佳化”。

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

<template>
  <ComponentA />
</template>

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

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

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

<template>
  <ComponentA />
</template>

對於components物件中的每個屬性，鍵將是元件的註冊名稱，而值將包含元件的實現。上述示例使用ES2015屬性簡寫，等同於

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

請注意，本地註冊的元件在子元件或後代元件中不可用。在這種情況下，ComponentA僅對當前元件可用，而不對其任何子元件或後代元件可用。

元件命名首字母大寫 ​

在本指南中，我們使用PascalCase命名來註冊元件。這是因為

1. PascalCase命名是有效的JavaScript識別符號。這使得在JavaScript中匯入和註冊元件更加容易。它還有助於IDE的自動完成。

2. <PascalCase />使得更明顯地看出這是一個Vue元件，而不是模板中的原生HTML元素。它還區分了Vue元件和自定義元素（Web元件）。

這是處理SFC或字串模板時的推薦樣式。然而，如in-DOM模板解析注意事項中所述，PascalCase標籤在in-DOM模板中不可用。

幸運的是，Vue支援將kebab-case標籤解析為使用PascalCase註冊的元件。這意味著註冊為MyComponent的元件可以透過<MyComponent>和<my-component>在模板中引用。這允許我們無論模板來源如何，都使用相同的JavaScript元件註冊程式碼。