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 相关文章推荐
javascript分页代码(当前页码居中)
Sep 20 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
Vue3.0的优化总结
Oct 16 Javascript
JS实现点击掉落特效
Jan 29 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php数组总结篇(一)
2008/09/30 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jquery图片切换插件
2015/03/16 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JS验证字符串功能
2017/02/22 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
layer弹出层全屏及关闭方法
2018/08/17 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中的推导式使用详解
2015/06/03 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python删除不需要的python文件方法
2018/04/24 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Python 使用office365邮箱的示例
2020/10/29 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
2015年煤矿工作总结
2015/04/28 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python