學習要點:
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)整理發布!