引言

一個(gè) Vue 組件在使用前需要先被“注冊”，這樣 Vue 才能在渲染模板時(shí)找到其對應(yīng)的實(shí)現(xiàn)。

組件注冊有兩種方式：全局注冊和局部注冊。

全局注冊?

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

import { createApp } from 'vue'
const app = createApp({})
app.component(
  // 注冊的名字
  'MyComponent',
  // 組件的實(shí)現(xiàn)
  {
    /* ... */
  }
)

如果使用單文件組件，你可以注冊被導(dǎo)入的 .vue 文件：

import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)

app.component() 方法可以被鏈?zhǔn)秸{(diào)用：

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

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

<!-- 這在當(dāng)前應(yīng)用的任意組件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

所有的子組件也可以使用全局注冊的組件，這意味著這三個(gè)組件也都可以在彼此內(nèi)部使用。

局部注冊?

全局注冊雖然很方便，但有以下幾個(gè)問題：

1. 全局注冊，但并沒有被使用的組件無法在生產(chǎn)打包時(shí)被自動(dòng)移除 (也叫“tree-shaking”)。如果你全局注冊了一個(gè)組件，即使它并沒有被實(shí)際使用，它仍然會(huì)出現(xiàn)在打包后的 JS 文件中。
2. 全局注冊在大型項(xiàng)目中使項(xiàng)目的依賴關(guān)系變得不那么明確。在父組件中使用子組件時(shí)，不太容易定位子組件的實(shí)現(xiàn)。和使用過多的全局變量一樣，這可能會(huì)影響應(yīng)用長期的可維護(hù)性。

相比之下，局部注冊的組件需要在使用它的父組件中顯式導(dǎo)入，并且只能在該父組件中使用。它的優(yōu)點(diǎn)是使組件之間的依賴關(guān)系更加明確，并且對 tree-shaking 更加友好。

局部注冊需要使用 components 選項(xiàng)：

<script>
import ComponentA from './ComponentA.vue'
export default {
  components: {
    ComponentA
  }
}
</script>
<template>
  <ComponentA />
</template>

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

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

請注意：局部注冊的組件在后代組件中并不可用。在這個(gè)例子中，ComponentA 注冊后僅在當(dāng)前組件可用，而在任何的子組件或更深層的子組件中都不可用。

組件名格式?

在整個(gè)指引中，我們都使用 PascalCase 作為組件名的注冊格式，這是因?yàn)椋?/p>

1. PascalCase 是合法的 JavaScript 標(biāo)識符。這使得在 JavaScript 中導(dǎo)入和注冊組件都很容易，同時(shí) IDE 也能提供較好的自動(dòng)補(bǔ)全。
2. <PascalCase /> 在模板中更明顯地表明了這是一個(gè) Vue 組件，而不是原生 HTML 元素。同時(shí)也能夠?qū)?Vue 組件和自定義元素 (web components) 區(qū)分開來。

在單文件組件和內(nèi)聯(lián)字符串模板中，我們都推薦這樣做。但是，PascalCase 的標(biāo)簽名在 DOM 模板中是不可用的。

為了方便，Vue 支持將模板中使用 kebab-case 的標(biāo)簽解析為使用 PascalCase 注冊的組件。這意味著一個(gè)以 MyComponent 為名注冊的組件，在模板中可以通過 <MyComponent> 或 <my-component> 引用。這讓我們能夠使用同樣的 JavaScript 組件注冊代碼來配合不同來源的模板。

到此這篇關(guān)于詳解Vue的組件注冊的文章就介紹到這了,更多相關(guān)Vue組件注冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！