學習要點：
1.規則說明
2.全局局部
本節課我們來開始學習 Vue3.x 的組件注冊的基本規則以及全局和局部的注冊。
一．規則說明
1. 上一節課，我們簡單的進行了組件的注冊，了解了如何創建注冊和復用方法；
2. 那么，我們探討一下組件名稱的一些規則，具體如下：
(1) . 組件名稱是唯一的；
(2) . 命名規則可以采用 kebab-case(button-counter)，減號隔開；
(3) . 命名規則也可以用 PascalCase(ButtonCounter)，單詞首字母大寫；
(4) . 這里推薦使用 kebab-case，全小寫并用減號隔開，遵循 W3C，防止沖突；
PS：這里防止沖突是，防止與未來的 HTML 擴展元素標簽的沖突；
二．全局和局部
1. 上一節課，我們定義了一個全局組件，用連綴方法再寫一遍，如下：
// 定義一個全局組件
Vue.createApp({}).component('button-counter', {}).mount('#app')
2. 有全局注冊，就有局部注冊的方法，局部注冊的方法如下：
// 可以理解為根組件，最頂層的組件
const app = Vue.createApp({
data() {
return {}
},
// 定義局部組件(也就是這個根組件的子組件)
components : {
'button-counter' : {
// 數據
data() {
return {
counter : 100
}
},
// 模板
template : `
計算器：{{counter}}
`
},
'button-counter2' : {},
'button-counter3' : {},
}
})
3. 當然，我們可以把組件的參數二分離出來，讓代碼更清晰且更好管理；
// 定義一個局部組件的對象內容部分
const buttonCounter = {}
components : {
'button-counter' : buttonCounter,
}
PS：在調用上，并沒有差異，而我們推薦使用局部組件，因為在以后的項目構建上更具優勢；
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
