Vue注册组件命名时不能用大写的原因浅析
这段时间一直在弄vue，当然也遇到很多问题，这里就来跟大家分享一些注册自定义模板组件的心得。
首先“VUE注册组件命名时不能用大写“其实这句话是不对的，但我们很多人开始都觉得是对的，因为大家都踩过大写命名的坑
下面我们来看个例子：
<div id="app">
<myTemplate></myTemplate>
</div>
<script>
Vue.component('myTemplate',{
template: '<h1>这里是自定义组件的内容</h1>'
})
new Vue({
el: '#app'
})
</script>
当我看完官网的文档后，信心满满的第一次准备自定义组件时，就写的跟上面差不多类型的代码
但是当我运行代码时，组件并没有被渲染出来，反而报错了说我用的组件没有注册，我当时真是挤破脑袋想了半天也没发现问题出在哪里
这时候我在想难道我的命名和源码里的冲突了？于是我把代码改成这样了↓
<div id="app">
<mytemplate></mytemplate>
</div>
<script>
Vue.component('mytemplate',{
template: '<h1>这里是自定义组件的内容</h1>'
})
new Vue({
el: '#app'
})
</script>
然后运行代码，ok完全正常，这时候大家都会认为vue注册组件不能用大写命名，我当时也这么认为的，直到这两天在用饿了么elementUI框架，当我看了他们的源码，发现原来并不是这样
他们注册组件的命名就和我第一次一样myTemplate，标准的驼峰命名方法，那么我一开始为什么会报错呢？这是为什么呢？难道VUE嫌弃我？
原来是我调用组件时的方法错了，VUE是允许用大写字母来注册组件的，但当你使用时得在驼峰命名的大写字母间加上”-“并都改为小写，看下面代码
<div id="app">
<my-template></my-template>
</div>
<script>
Vue.component('myTemplate',{
template: '<h1>这里是自定义组件的内容</h1>'
})
new Vue({
el: '#app'
})
</script>
代码运行正常，这个时候大家是不是看出来，vue其实是可以用大写字母命名注册的
后面我也试了很多种命名方式，比如”my-template“这样也是可以的
”My-template“这样的会报错
----------------------------------------------------------------
后来在官网看到这句话camelCase vs. kebab-case HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名： 如果你使用字符串模版，则没有这些限制。
总结
以上所述是小编给大家介绍的Vue注册组件命名时不能用大写的原因浅析,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
今天小编就为大家分享一篇Vue实现导航栏的显示开关控制，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章介绍了Vue.js中v-for指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue实现弹窗引用另一个页面窗口，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
在开发的过程中点击提交按钮,或者是一些其它场景总会遇到loading加载,下面这篇文章主要给大家介绍了关于vue3如何解决各场景loading过度的相关资料,避免白屏尴尬,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue实现超过两行显示展开收起的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue单元格多列合并的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
本文主要介绍了vue项目展示pdf文件的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家详细介绍了Vue下拉选择框Select组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论