vue中自定义组件的命名规则详解
更新时间：2025年08月01日 08:31:52 作者：小星星星★
Vue组件在HTML中需用连字符分隔（如like-big）,因HTML不区分大小写会自动转为小写,导致无法匹配组件,直接使用大写会导致解析错误,正确写法应遵循HTML标签转义规则
问题
vue中自定义的组件名在html中字母大写会报错
- html：
- js：
自定义的组件中字母可以大写，但是在html标签中，字母有大写的就会报错
原因
- 这是因为html中不区分大小写，所以在html中如果写为 likeBig，就会自动解析为 likebig
- 匹配的优先顺序从高到低为：原标签名、likeBig化的标签名、LikeBig化的标签名
- 而由于 html解析成likeBig时，相当于将该标签当成了一个单词进行了转换，所以它的匹配顺序为likebig，likebig，Likebig，所以找不到对应组件
解决的办法
- 在html标签中将两个单词用-隔开，like-big，这时就相当于是两个单词
- 会依次匹配 like-big，likeBig，LikeBig
总结
vue中是支持命名中有字母大写的，但是模板解析插入dom时，不区分大小写，都转成了小写，所以会导致，匹配不到对应的组件
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中SourceMap的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了Vue pinia模块化全局注册，Pinia是Vue.js团队成员专门为Vue开发的一个全新的状态管理库，并且已经被纳入官方github2023-02-02
Element的el-tree控件后台数据结构的生成以及方法的抽取
这篇文章主要介绍了Element的el-tree控件后台数据结构的生成以及方法的抽取，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
Vue使用mounted和created时,this无法指向data中的数据问题
这篇文章主要介绍了Vue使用mounted和created时,this无法指向data中的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
cross-env是跨平台设置和使用环境变量的脚本。这篇文章主要介绍了vue中cross-env的使用,需要的朋友可以参考下2019-09-09
这篇文章主要为大家介绍了十分钟封装一个好用的axios步骤示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要为大家详细介绍了vue+elementUI实现点击按钮互斥效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
缓存清除成为克服浏览器缓存中过时内容挑战的关键技术,术语“缓存清除”是指故意使静态资源失效或进行版本控制,迫使浏览器在发生更改时获取新资源,本文给大家介绍了Vue如何清除缓存,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了webpack+vue.js构建前端工程化的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库，本文主要介绍了Vue使用driver.js做引导页，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
最新评论