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时，不区分大小写，都转成了小写，所以会导致，匹配不到对应的组件
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vite配置@别名以及让vscode智能提示路经的步骤,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
本文会通过一个简单的vue-toast插件，来帮助了解掌握插件的开发和使用。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
Vue3使用defineAsyncComponent实现异步组件加载的代码示例
在 Vue 3 中,异步组件加载是一种优化应用性能的重要手段,通过异步加载组件,可以减少初始加载时的资源体积,从而提升应用的加载速度和用户体验,本文将详细介绍如何使用 defineAsyncComponent 实现异步组件加载,并提供相关的代码示例,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了解决vue项目本地启动时无法携带cookie,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
vue2 elementui if导致的rules判断失效的解决方法
文章讨论了在使用Vue2和ElementUI时,将if语句放在el-form-item内导致rules判断失效的问题,并提出了将判断逻辑移到外部的解决方案,感兴趣的朋友一起看看吧2024-12-12
这篇文章主要为大家介绍了vue动态设置浏览器标题的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
在Vue.js的开发过程中,组件方法的定义和调用是非常常见的,有时候,为了响应事件或其他操作,我们需要在组件的方法中使用匿名函数,本文将深入探讨如何在Vue组件的方法中加载和使用匿名函数,并提供详细的代码示例和解释,帮助开发者更好地理解和应用这些技术2024-09-09
本文主要介绍了Element table 上下移需求的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要给大家介绍了关于vue.js整合vux中上拉加载下拉刷新的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)
这篇文章主要给大家介绍了关于如何巧用Vue.extend继承组件实现el-table双击可编辑的相关资料,不使用v-if、v-else,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论