組件注冊

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

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

全局注冊 ​

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

js

import { createApp } from 'vue'

const app = createApp({})

app.component(

// 注冊的名字

'MyComponent',

// 組件的實現(xiàn)

{

/* ... */

}

)

如果使用(yòng)單文(wén)件組件，你(nǐ)可以注冊被導入的 .vue 文(wén)件：

js

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

app.component() 方法可以被鏈式調用(yòng)：

js

app

.component('ComponentA', ComponentA)

.component('ComponentB', ComponentB)

.component('ComponentC', ComponentC)

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

template

<!-- 這(zhè)在當前應用(yòng)的任意組件中都可用(yòng) -->

<ComponentA/>

<ComponentB/>

<ComponentC/>

所有的子組件也(yě)可以使用(yòng)全局注冊的組件，這(zhè)意味着這(zhè)三個組件也(yě)都可以在彼此内部使用(yòng)。

局部注冊 ​

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

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

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

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

局部注冊需要使用(yòng) components 選項：

vue

<script>

import ComponentA from './ComponentA.vue'

export default {

components: {

ComponentA

}

}

</script>

<template>

<ComponentA />

</template>

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

js

export default {

components: {

ComponentA: ComponentA

}

// ...

}

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

組件名格式 ​

在整個指引中，我們都使用(yòng) PascalCase 作(zuò)爲組件名的注冊格式，這(zhè)是因爲：

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

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

在單文(wén)件組件和(hé)内聯字符串模闆中，我們都推薦這(zhè)樣做。但(dàn)是，PascalCase 的标簽名在 DOM 模闆中是不可用(yòng)的，詳情參見 DOM 模闆解析注意事(shì)項。

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