此處分為以下3個(gè)部分講

image.png

組件名

注冊(cè)組件時(shí)，需要提供一個(gè)名作為組件名

在 DOM 中使用組件時(shí)，建議組件名的字母全小寫，且包含連字符‘-’，目的是為了避免與未來HTML元素名沖突

舉例??：定義一個(gè)名叫my-component組件

動(dòng)畫1.gif

在字符串模板或單個(gè)文件組件中定義組件時(shí)，組件名可以使用 kebab-case，也可以使用 PascalCase

• 如果使用kabab-case，則在使用處也需要使用kabab-case

• 如果使用PascalCase，則在使用處既可以使用PascalCase，也可以使用kabab-case的寫法，但例外情況是，如果使用處是在DOM中，則DOM只有 kebab-case 是有效的

舉例??：定義時(shí)使用PascalCase，在DOM中使用kebab-case和PascalCase兩種方式使用該組件

動(dòng)畫2.gif

發(fā)現(xiàn)只有使用kebab-case的才能顯示出來，第二種Vue發(fā)出警告了

因此，定義組件名時(shí)，建議使用kabab-case的寫法

全局注冊(cè)

如之前的例子，通過應(yīng)用實(shí)例身上的component方法注冊(cè)的組件就是全局組件

全局組件可以用在任何新創(chuàng)建的組件實(shí)例的模板中

舉例??：定義兩個(gè)全局組件，將一個(gè)組件用在另一個(gè)組件模板中

動(dòng)畫3.gif

可以看到，被放在另一個(gè)組件中的組件也被渲染出來了

全局注冊(cè)有缺陷，可能會(huì)造成了用戶下載無謂的JS代碼，因此可以使用局部注冊(cè)

局部注冊(cè)

使用組件的配置選項(xiàng)components注冊(cè)局部組件

• 首先聲明一個(gè)普通的JS對(duì)象來定義組件
• 然后在 components 選項(xiàng)中注冊(cè)

對(duì)于components中的每個(gè)屬性，屬性名就是自定義元素名，屬性值就是組件的選項(xiàng)對(duì)象

舉例??：通過components注冊(cè)兩個(gè)局部組件component-1和component-2

動(dòng)畫4.gif

需要注意：局部注冊(cè)的組件在其子組件中不可用，即component-1中不能使用component-2，如果要使用，則必須想注冊(cè)局部組件那樣，在component-1的配置項(xiàng)components中注冊(cè)

可以在模塊系統(tǒng)中局部注冊(cè)

舉例??：通過模塊化導(dǎo)入組件配置，并將配置引入components中

動(dòng)畫5.gif

小結(jié)

為了方便，我將注冊(cè)組件相關(guān)內(nèi)容匯總為一圖

1 注冊(cè)組件.png

為了方便批量下載，我將相關(guān)的高清思維導(dǎo)圖及源文件上傳至GitHub，可移步下載：https://github.com/jCodeLife/mind-map