vue中自定義組件的命名規(guī)則詳解
更新時(shí)間：2025年08月01日 08:31:52 作者：小星星星★
Vue組件在HTML中需用連字符分隔（如like-big）,因HTML不區(qū)分大小寫會(huì)自動(dòng)轉(zhuǎn)為小寫,導(dǎo)致無(wú)法匹配組件,直接使用大寫會(huì)導(dǎo)致解析錯(cuò)誤,正確寫法應(yīng)遵循HTML標(biāo)簽轉(zhuǎn)義規(guī)則
問(wèn)題
vue中自定義的組件名在html中字母大寫會(huì)報(bào)錯(cuò)
- html：
- js：
自定義的組件中字母可以大寫，但是在html標(biāo)簽中，字母有大寫的就會(huì)報(bào)錯(cuò)
原因
- 這是因?yàn)閔tml中不區(qū)分大小寫，所以在html中如果寫為 likeBig，就會(huì)自動(dòng)解析為 likebig
- 匹配的優(yōu)先順序從高到低為：原標(biāo)簽名、likeBig化的標(biāo)簽名、LikeBig化的標(biāo)簽名
- 而由于 html解析成likeBig時(shí)，相當(dāng)于將該標(biāo)簽當(dāng)成了一個(gè)單詞進(jìn)行了轉(zhuǎn)換，所以它的匹配順序?yàn)閘ikebig，likebig，Likebig，所以找不到對(duì)應(yīng)組件
解決的辦法
- 在html標(biāo)簽中將兩個(gè)單詞用-隔開，like-big，這時(shí)就相當(dāng)于是兩個(gè)單詞
- 會(huì)依次匹配 like-big，likeBig，LikeBig
總結(jié)
vue中是支持命名中有字母大寫的，但是模板解析插入dom時(shí)，不區(qū)分大小寫，都轉(zhuǎn)成了小寫，所以會(huì)導(dǎo)致，匹配不到對(duì)應(yīng)的組件
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vite配置@別名以及讓vscode智能提示路經(jīng)的步驟
這篇文章主要給大家介紹了關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的步驟,文中通過(guò)代碼示例以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
本文會(huì)通過(guò)一個(gè)簡(jiǎn)單的vue-toast插件，來(lái)幫助了解掌握插件的開發(fā)和使用。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
Vue3使用defineAsyncComponent實(shí)現(xiàn)異步組件加載的代碼示例
在 Vue 3 中,異步組件加載是一種優(yōu)化應(yīng)用性能的重要手段,通過(guò)異步加載組件,可以減少初始加載時(shí)的資源體積,從而提升應(yīng)用的加載速度和用戶體驗(yàn),本文將詳細(xì)介紹如何使用 defineAsyncComponent 實(shí)現(xiàn)異步組件加載,并提供相關(guān)的代碼示例,需要的朋友可以參考下2025-03-03
解決vue項(xiàng)目本地啟動(dòng)時(shí)無(wú)法攜帶cookie的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目本地啟動(dòng)時(shí)無(wú)法攜帶cookie,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
vue2 elementui if導(dǎo)致的rules判斷失效的解決方法
文章討論了在使用Vue2和ElementUI時(shí),將if語(yǔ)句放在el-form-item內(nèi)導(dǎo)致rules判斷失效的問(wèn)題,并提出了將判斷邏輯移到外部的解決方案,感興趣的朋友一起看看吧2024-12-12
vue 動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法詳解
這篇文章主要為大家介紹了vue動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
在Vue.js的開發(fā)過(guò)程中,組件方法的定義和調(diào)用是非常常見的,有時(shí)候,為了響應(yīng)事件或其他操作,我們需要在組件的方法中使用匿名函數(shù),本文將深入探討如何在Vue組件的方法中加載和使用匿名函數(shù),并提供詳細(xì)的代碼示例和解釋,幫助開發(fā)者更好地理解和應(yīng)用這些技術(shù)2024-09-09
Element?table?上下移需求的實(shí)現(xiàn)
本文主要介紹了Element?table?上下移需求的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue.js整合vux中的上拉加載下拉刷新實(shí)例教程
這篇文章主要給大家介紹了關(guān)于vue.js整合vux中上拉加載下拉刷新的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
如何巧用Vue.extend繼承組件實(shí)現(xiàn)el-table雙擊可編輯(不使用v-if、v-else)
這篇文章主要給大家介紹了關(guān)于如何巧用Vue.extend繼承組件實(shí)現(xiàn)el-table雙擊可編輯的相關(guān)資料,不使用v-if、v-else,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06