引入子組件命名不規(guī)范錯(cuò)誤

昨天在做一個(gè)省市縣三級(jí)聯(lián)動(dòng)子組件，文件名稱(chēng)為threelink.vue，結(jié)果總是報(bào)以下錯(cuò)誤，用了各種方法還是報(bào)錯(cuò)，系統(tǒng)引入過(guò)另一個(gè)組件fetch.vue沒(méi)有問(wèn)題，但這組件總是報(bào)以下錯(cuò)誤。

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

代碼如下：

//threelink.vue代碼為：
? export default {
? ? name: 'Threelink',
//引用文件導(dǎo)入為：
? ? ? import Threelink from "@/components/xiyou/threelink/threelink"
? ??
? ? ? export default {
? ? ?? ??? ?components: { Threelink },
//文件中使用為：
? ? ?<el-col ?:span="16" class="city-select">
? ? ? ? <three-link :adcode="adcode"></three-link>
? ? ? </el-col>

經(jīng)過(guò)反復(fù)檢查，由于這個(gè)組件名稱(chēng)是2個(gè)字母引入，由于VUE在不同的地方對(duì)駝峰字符要求不一下，引入文件改為如下才能使用。

? import ThreeLink from "@/components/xiyou/threelink/threelink"
export default {
? ? components: { ThreeLink },

根據(jù)規(guī)范注意以下

1、子組件文件名全為小寫(xiě)：threelink

2、子組件export名第一字符大寫(xiě)：Threelink

3、引入組件每個(gè)字符都要大寫(xiě)：ThreeLink

4、components，與第3一樣

5、使用的地方，用小寫(xiě)字符，用“-”分隔開(kāi)，three-link

此問(wèn)題反復(fù)試了多次，特此記錄。

vue組件名稱(chēng)命名說(shuō)明

在使用Vue自定義組件時(shí)，需要給組件命名，即在注冊(cè)一個(gè)組件的時(shí)候，我們始終需要給它一個(gè)名字。比如在全局注冊(cè)的時(shí)候我們已經(jīng)看到了：

Vue.component('my-component-name', {?
? ? /* ... */?
})

該組件名就是 Vue.component 的第一個(gè)參數(shù)。

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

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

自定義組件名方式

使用 kebab-case命名組件

當(dāng)使用 kebab-case (小寫(xiě)字母加短橫線分隔命名) 定義一個(gè)組件時(shí)，你也必須在引用這個(gè)自定義元素時(shí)使用 kebab-case，例如 <my-component-name>。

例如：

Vue.component('my-component-name', {?
? ? /* ... */?
})

使用 PascalCase命名組件

Vue.component('MyComponentName', {
? ? ?/* ... */?
})

當(dāng)使用 PascalCase (首字母大寫(xiě)命名) 定義一個(gè)組件時(shí)，你在引用這個(gè)自定義元素時(shí)兩種命名法都可以使用。也就是說(shuō) <my-component-name> 和 <MyComponentName> 都是可接受的。

注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時(shí)只有 kebab-case 是有效的。而用駝峰法的名稱(chēng)是無(wú)效的。例如以下引用組件無(wú)效：

<div id="app">
?? ??? ?<div class="my">父組件自己</div>
?? ??? ?<!-- 調(diào)用子組件時(shí)ChildComponent無(wú)效，必須用kebab-case方式 -->
?? ??? ?<ChildComponent></ChildComponent>
?
? ? ? ? <!--?
? ? ? ? 調(diào)用子組件時(shí)child-component有效，
? ? ? ? 組件定義時(shí)可以用kebab-case方式或者PascalCase方式命名?
? ? ? ? -->
?? ??? ?<child-component></child-component>
</div>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論