在vue官网中有这样的说明：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
但是，如果使用的是字符串模板的话，就不存在这个限制了。
image.png
链接地址：https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-camelCase-vs-kebab-case
源码说明：
在Vue的源码中创建Vue组件的时候createComponent()，解析组件的相关属性
// extract props
var propsData = extractPropsFromVNodeData(data, Ctor, tag);
而，在extractPropsFromVNodeData()中，Vue通过调用内部方法hyphenate，把驼峰形式的属性转换为横断线形式
var hyphenateRE = /\B([A-Z])/g;
var hyphenate = cached(function(str){
return str.replace(hyphenateRE,'-$1').toLowerCase()
})
除此之外，Vue在initProps()，validateProp()时，都将驼峰形式的属性转换为横断线形式
但是对于事件来说，并没有把驼峰命名转成短横线的这一步，所以自定义事件必须要用小写命名或者用短横线命名，不能使用驼峰命名。
链接地址：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D
网友评论