組件注冊

此章(zhāng)節假設你已經看(kàn)過了(le)組件基礎。若你還不了(le)解組件是什麽，請(qǐng)先閱讀該章(zhāng)節。

一(yī)個 Vue 組件在使用前需要(yào)先被“注冊”，這(zhè)樣 Vue 才能(néng)在渲染模闆時(shí)找到其對應的實現。組件注冊有兩種方式：全局注冊和(hé)局部注冊。

全局注冊 ​

我們可(kě)以使用 Vue 應用實例的 app.component() 方法，讓組件在當前 Vue 應用中全局可(kě)用。

js

import { createApp } from 'vue'

const app = createApp({})

app.component(

// 注冊的名字

'MyComponent',

// 組件的實現

{

/* ... */

}

)

如(rú)果使用單文件組件，你可(kě)以注冊被導入的 .vue 文件：

js

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

app.component() 方法可(kě)以被鏈式調用：

js

app

.component('ComponentA', ComponentA)

.component('ComponentB', ComponentB)

.component('ComponentC', ComponentC)

全局注冊的組件可(kě)以在此應用的任意組件的模闆中使用：

template

<!-- 這(zhè)在當前應用的任意組件中都(dōu)可(kě)用 -->

<ComponentA/>

<ComponentB/>

<ComponentC/>

所有的子組件也可(kě)以使用全局注冊的組件，這(zhè)意味着這(zhè)三個組件也都(dōu)可(kě)以在彼此內(nèi)部使用。

局部注冊 ​

全局注冊雖然很(hěn)方便，但(dàn)有以下(xià)幾個問(wèn)題：

全局注冊，但(dàn)并沒有被使用的組件無法在生産打包時(shí)被自(zì)動移除 (也叫“tree-shaking”)。如(rú)果你全局注冊了(le)一(yī)個組件，即使它并沒有被實際使用，它仍然會出現在打包後的 JS 文件中。

全局注冊在大型項目中使項目的依賴關系變得不那(nà)麽明(míng)确。在父組件中使用子組件時(shí)，不太容易定位子組件的實現。和(hé)使用過多的全局變量一(yī)樣，這(zhè)可(kě)能(néng)會影響應用長(cháng)期的可(kě)維護性。

相比之下(xià)，局部注冊的組件需要(yào)在使用它的父組件中顯式導入，并且隻能(néng)在該父組件中使用。它的優點是使組件之間(jiān)的依賴關系更加明(míng)确，并且對 tree-shaking 更加友(yǒu)好。

局部注冊需要(yào)使用 components 選項：

vue

<script>

import ComponentA from './ComponentA.vue'

export default {

components: {

ComponentA

}

}

</script>

<template>

<ComponentA />

</template>

對于每個 components 對象裏的屬性，它們的 key 名就是注冊的組件名，而值就是相應組件的實現。上(shàng)面的例子中使用的是 ES2015 的縮寫語法，等價于：

js

export default {

components: {

ComponentA: ComponentA

}

// ...

}

請(qǐng)注意：局部注冊的組件在後代組件中并不可(kě)用。在這(zhè)個例子中，ComponentA 注冊後僅在當前組件可(kě)用，而在任何的子組件或更深層的子組件中都(dōu)不可(kě)用。

組件名格式 ​

在整個指引中，我們都(dōu)使用 PascalCase 作(zuò)為(wèi)組件名的注冊格式，這(zhè)是因為(wèi)：

PascalCase 是合法的 JavaScript 标識符。這(zhè)使得在 JavaScript 中導入和(hé)注冊組件都(dōu)很(hěn)容易，同時(shí) IDE 也能(néng)提供較好的自(zì)動補全。

<PascalCase /> 在模闆中更明(míng)顯地(dì)表明(míng)了(le)這(zhè)是一(yī)個 Vue 組件，而不是原生 HTML 元素。同時(shí)也能(néng)夠将 Vue 組件和(hé)自(zì)定義元素 (web components) 區(qū)分開(kāi)來。

在單文件組件和(hé)內(nèi)聯字符串模闆中，我們都(dōu)推薦這(zhè)樣做(zuò)。但(dàn)是，PascalCase 的标簽名在 DOM 模闆中是不可(kě)用的，詳情參見(jiàn) DOM 模闆解析注意事項。

為(wèi)了(le)方便，Vue 支持将模闆中使用 kebab-case 的标簽解析為(wèi)使用 PascalCase 注冊的組件。這(zhè)意味着一(yī)個以 MyComponent 為(wèi)名注冊的組件，在模闆中可(kě)以通(tōng)過 <MyComponent> 或 <my-component> 引用。這(zhè)讓我們能(néng)夠使用同樣的 JavaScript 組件注冊代碼來配合不同來源的模闆。