Vue注册组件命名时不能用大写的原因浅析


Posted in Javascript onApril 25, 2019

这段时间一直在弄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注册组件命名时不能用大写的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
Java File类的常用方法总结
Mar 18 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 #Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 #Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 #Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 #Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 #Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 #Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 #Javascript
You might like
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
详解python中的异常捕获
2020/12/15 Python
互动出版网:专业书籍
2017/03/21 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
信访工作者先进事迹
2014/01/17 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
婚内房产协议书范本
2014/10/02 职场文书
军事理论课感想
2015/08/11 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript