Vue 3.0 組件注冊

2021-07-16 11:29 更新

該頁面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對組件不太了解,推薦你先閱讀它。

#組件名

在注冊一個組件的時候,我們始終需要給它一個名字。比如在全局注冊的時候我們已經(jīng)看到了:

  1. const app = Vue.createApp({...})
  2. app.component('my-component-name', {
  3. /* ... */
  4. })

該組件名就是 app.component 的第一個參數(shù),在上面的例子中,組件的名稱是“my-component-name”。

你給予組件的名字可能依賴于你打算拿它來做什么。當(dāng)直接在 DOM 中使用一個組件 (而不是在字符串模板或單文件組件) 的時候,我們強烈推薦遵循 W3C 規(guī)范中的自定義組件名 (字母全小寫且必須包含一個連字符)。這會幫助你避免和當(dāng)前以及未來的 HTML 元素相沖突。

  1. 全部小寫
  2. 包含連字符 (及:即有多個單詞與連字符符號連接)

這樣會幫助你避免與當(dāng)前以及未來的 HTML 元素發(fā)生沖突。

你可以在風(fēng)格指南中查閱到關(guān)于組件名的其它建議。

#組件名大小寫

在字符串模板或單個文件組件中定義組件時,定義組件名的方式有兩種:

#使用 kebab-case

  1. app.component('my-component-name', {
  2. /* ... */
  3. })

當(dāng)使用 kebab-case (短橫線分隔命名) 定義一個組件時,你也必須在引用這個自定義元素時使用 kebab-case,例如 <my-component-name>

#使用 PascalCase

  1. app.component('MyComponentName', {
  2. /* ... */
  3. })

當(dāng)使用 PascalCase (首字母大寫命名) 定義一個組件時,你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name><MyComponentName> 都是可接受的。注意,盡管如此,直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。

#全局注冊

到目前為止,我們只用過 app.component 來創(chuàng)建組件:

  1. Vue.createApp({...}).component('my-component-name', {
  2. // ... 選項 ...
  3. })

這些組件是全局注冊的。也就是說它們在注冊之后可以用在任何新創(chuàng)建的組件實例的模板中。比如:

  1. const app = Vue.createApp({})
  2. app.component('component-a', {
  3. /* ... */
  4. })
  5. app.component('component-b', {
  6. /* ... */
  7. })
  8. app.component('component-c', {
  9. /* ... */
  10. })
  11. app.mount('#app')

  1. <div id="app">
  2. <component-a></component-a>
  3. <component-b></component-b>
  4. <component-c></component-c>
  5. </div>

在所有子組件中也是如此,也就是說這三個組件在各自內(nèi)部也都可以相互使用。

#局部注冊

全局注冊往往是不夠理想的。比如,如果你使用一個像 webpack 這樣的構(gòu)建系統(tǒng),全局注冊所有的組件意味著即便你已經(jīng)不再使用一個組件了,它仍然會被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。

在這些情況下,你可以通過一個普通的 JavaScript 對象來定義組件:

  1. const ComponentA = {
  2. /* ... */
  3. }
  4. const ComponentB = {
  5. /* ... */
  6. }
  7. const ComponentC = {
  8. /* ... */
  9. }

然后在 components 選項中定義你想要使用的組件:

  1. const app = Vue.createApp({
  2. components: {
  3. 'component-a': ComponentA,
  4. 'component-b': ComponentB
  5. }
  6. })

對于 components 對象中的每個 property 來說,其 property 名就是自定義元素的名字,其 property 值就是這個組件的選項對象。

注意局部注冊的組件在其子組件中不可用。例如,如果你希望 ComponentAComponentB 中可用,則你需要這樣寫:

  1. const ComponentA = {
  2. /* ... */
  3. }
  4. const ComponentB = {
  5. components: {
  6. 'component-a': ComponentA
  7. }
  8. // ...
  9. }

或者如果你通過 Babel 和 webpack 使用 ES2015 模塊,那么代碼看起來更像:

  1. import ComponentA from './ComponentA.vue'
  2. export default {
  3. components: {
  4. ComponentA
  5. }
  6. // ...
  7. }

注意在 ES2015+ 中,在對象中放一個類似 ComponentA 的變量名其實是 ComponentAComponentA 的縮寫,即這個變量名同時是:

  • 用在模板中的自定義元素的名稱
  • 包含了這個組件選項的變量名

#模塊系統(tǒng)

如果你沒有通過 import/require 使用一個模塊系統(tǒng),也許可以暫且跳過這個章節(jié)。如果你使用了,那么我們會為你提供一些特殊的使用說明和注意事項。

#在模塊系統(tǒng)中局部注冊

如果你還在閱讀,說明你使用了諸如 Babel 和 webpack 的模塊系統(tǒng)。在這些情況下,我們推薦創(chuàng)建一個 components 目錄,并將每個組件放置在其各自的文件中。

然后你需要在局部注冊之前導(dǎo)入每個你想使用的組件。例如,在一個假設(shè)的 ComponentB.jsComponentB.vue 文件中:

  1. import ComponentA from './ComponentA'
  2. import ComponentC from './ComponentC'
  3. export default {
  4. components: {
  5. ComponentA,
  6. ComponentC
  7. }
  8. // ...
  9. }

現(xiàn)在 ComponentAComponentC 都可以在 ComponentB 的模板中使用了。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號