vue之props和自定义事件的驼峰命名

在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