欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue引入子組件命名不規(guī)范錯誤的解決方案

 更新時間:2022年04月14日 16:14:05   作者:海鹽老伍  
這篇文章主要介紹了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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

最新評論