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 Array对象扩展indexOf()方法
May 09 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
php生成word并下载代码实例
2019/03/15 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
tab栏切换原理
2017/03/22 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
python中argparse模块用法实例详解
2015/06/03 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
寄语学生的话
2014/04/10 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
党性分析材料格式
2014/12/19 职场文书
《假如》教学反思
2016/02/17 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
tree shaking对打包体积优化及作用
2022/07/07 Java/Android