建站
咨詢
售后
建站咨詢
新聞中心
該頁(yè)面假設(shè)你已經(jīng)閱讀過(guò)了組件基礎(chǔ)。如果你還對(duì)組件不太了解，推薦你先閱讀它。
東洲ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！
#組件名
在注冊(cè)一個(gè)組件的時(shí)候，我們始終需要給它一個(gè)名字。比如在全局注冊(cè)的時(shí)候我們已經(jīng)看到了：
const app = Vue.createApp({...})
app.component('my-component-name', {
/* ... */
}) 該組件名就是 app.component 的第一個(gè)參數(shù)，在上面的例子中，組件的名稱是“my-component-name”。
你給予組件的名字可能依賴于你打算拿它來(lái)做什么。當(dāng)直接在 DOM 中使用一個(gè)組件 (而不是在字符串模板或單文件組件) 的時(shí)候，我們強(qiáng)烈推薦遵循 W3C 規(guī)范中的自定義組件名 (字母全小寫(xiě)且必須包含一個(gè)連字符)。這會(huì)幫助你避免和當(dāng)前以及未來(lái)的 HTML 元素相沖突。
- 全部小寫(xiě)
- 包含連字符 (及：即有多個(gè)單詞與連字符符號(hào)連接)
這樣會(huì)幫助你避免與當(dāng)前以及未來(lái)的 HTML 元素發(fā)生沖突。
你可以在風(fēng)格指南中查閱到關(guān)于組件名的其它建議。
#組件名大小寫(xiě)
在字符串模板或單個(gè)文件組件中定義組件時(shí)，定義組件名的方式有兩種：
#使用 kebab-case
app.component('my-component-name', {
/* ... */
}) 當(dāng)使用 kebab-case (短橫線分隔命名) 定義一個(gè)組件時(shí)，你也必須在引用這個(gè)自定義元素時(shí)使用 kebab-case，例如
#使用 PascalCase
app.component('MyComponentName', {
/* ... */
}) 當(dāng)使用 PascalCase (首字母大寫(xiě)命名) 定義一個(gè)組件時(shí)，你在引用這個(gè)自定義元素時(shí)兩種命名法都可以使用。也就是說(shuō)
#全局注冊(cè)
到目前為止，我們只用過(guò) app.component 來(lái)創(chuàng)建組件：
Vue.createApp({...}).component('my-component-name', {
// ... 選項(xiàng) ...
})這些組件是全局注冊(cè)的。也就是說(shuō)它們?cè)谧?cè)之后可以用在任何新創(chuàng)建的組件實(shí)例的模板中。比如：
const app = Vue.createApp({})
app.component('component-a', {
/* ... */
})
app.component('component-b', {
/* ... */
})
app.component('component-c', {
/* ... */
})
app.mount('#app')
在所有子組件中也是如此，也就是說(shuō)這三個(gè)組件在各自內(nèi)部也都可以相互使用。
#局部注冊(cè)
全局注冊(cè)往往是不夠理想的。比如，如果你使用一個(gè)像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊(cè)所有的組件意味著即便你已經(jīng)不再使用一個(gè)組件了，它仍然會(huì)被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無(wú)謂的增加。
在這些情況下，你可以通過(guò)一個(gè)普通的 JavaScript 對(duì)象來(lái)定義組件：
const ComponentA = {
/* ... */
}
const ComponentB = {
/* ... */
}
const ComponentC = {
/* ... */
} 然后在 components 選項(xiàng)中定義你想要使用的組件：
const app = Vue.createApp({
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
}) 對(duì)于 components 對(duì)象中的每個(gè) property 來(lái)說(shuō)，其 property 名就是自定義元素的名字，其 property 值就是這個(gè)組件的選項(xiàng)對(duì)象。
注意局部注冊(cè)的組件在其子組件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，則你需要這樣寫(xiě)：
const ComponentA = {
/* ... */
}
const ComponentB = {
components: {
'component-a': ComponentA
}
// ...
}或者如果你通過(guò) Babel 和 webpack 使用 ES2015 模塊，那么代碼看起來(lái)更像：
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
}
// ...
} 注意在 ES2015+ 中，在對(duì)象中放一個(gè)類(lèi)似 ComponentA 的變量名其實(shí)是 ComponentA：ComponentA 的縮寫(xiě)，即這個(gè)變量名同時(shí)是：
- 用在模板中的自定義元素的名稱
- 包含了這個(gè)組件選項(xiàng)的變量名
#模塊系統(tǒng)
如果你沒(méi)有通過(guò) import/require 使用一個(gè)模塊系統(tǒng)，也許可以暫且跳過(guò)這個(gè)章節(jié)。如果你使用了，那么我們會(huì)為你提供一些特殊的使用說(shuō)明和注意事項(xiàng)。
#在模塊系統(tǒng)中局部注冊(cè)
如果你還在閱讀，說(shuō)明你使用了諸如 Babel 和 webpack 的模塊系統(tǒng)。在這些情況下，我們推薦創(chuàng)建一個(gè) components 目錄，并將每個(gè)組件放置在其各自的文件中。
然后你需要在局部注冊(cè)之前導(dǎo)入每個(gè)你想使用的組件。例如，在一個(gè)假設(shè)的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
}
// ...
} 現(xiàn)在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
標(biāo)題名稱：創(chuàng)新互聯(lián)VUE3教程：Vue 3.0 組件注冊(cè)
網(wǎng)站地址：http://www.dlmjj.cn/article/dpidopj.html
