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

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

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)過反復(fù)檢查，由于這個組件名稱是2個字母引入，由于VUE在不同的地方對駝峰字符要求不一下，引入文件改為如下才能使用。

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

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

1、子組件文件名全為小寫：threelink

2、子組件export名第一字符大寫：Threelink

3、引入組件每個字符都要大寫：ThreeLink

4、components，與第3一樣

5、使用的地方，用小寫字符，用“-”分隔開，three-link

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

vue組件名稱命名說明

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

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

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

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

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

自定義組件名方式

使用 kebab-case命名組件

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

例如：

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

使用 PascalCase命名組件

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

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

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

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

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

最新評論