vue引入子組件命名不規(guī)范錯誤的解決方案
引入子組件命名不規(guī)范錯誤
昨天在做一個省市縣三級聯(lián)動子組件,文件名稱為threelink.vue,結果總是報以下錯誤,用了各種方法還是報錯,系統(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', //引用文件導入為: ? ? ? 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)過反復檢查,由于這個組件名稱是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
此問題反復試了多次,特此記錄。
vue組件名稱命名說明
在使用Vue自定義組件時,需要給組件命名,即在注冊一個組件的時候,我們始終需要給它一個名字。比如在全局注冊的時候我們已經(jīng)看到了:
Vue.component('my-component-name', {? ? ? /* ... */? })
該組件名就是 Vue.component 的第一個參數(shù)。
給予組件的名字可能依賴于打算拿它來做什么。當直接在 DOM 中使用一個組件 (而不是在字符串模板或單文件組件) 的時候,強烈推薦遵循 W3C 規(guī)范中的自定義組件名 (字母全小寫且必須包含一個連字符)。這會幫助你避免和當前以及未來的 HTML 元素相沖突。
可以在風格指南中查閱到關于組件名的其它建議。
自定義組件名方式
使用 kebab-case命名組件
當使用 kebab-case (小寫字母加短橫線分隔命名) 定義一個組件時,你也必須在引用這個自定義元素時使用 kebab-case,例如 <my-component-name>。
例如:
Vue.component('my-component-name', {? ? ? /* ... */? })
使用 PascalCase命名組件
Vue.component('MyComponentName', { ? ? ?/* ... */? })
當使用 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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue項目中銷毀window.addEventListener事件監(jiān)聽解析
這篇文章主要介紹了vue項目中銷毀window.addEventListener事件監(jiān)聽,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例
這篇文章主要介紹了Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例,幫助大家更好的理解和學習vue,感興趣的朋友可以了解下2020-11-11vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫
這篇文章主要介紹了vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04