vue Prop 的大小写 (camelCase vs kebab-case)

vue官方文档如下:

为什么dom中的模板不区分大小写,而字符串中的模板却区分大小写?

dom模板：
dom模板就是原先写在html文件中，一打开就会被浏览器进行解析渲染的，所以要遵循html结构和标签的命名，否则浏览器不解析也就不能获取内容了。而html标签是不区分大小写的,所以如果我们采用驼峰形式命名的组件被浏览器当作html解析时候,就会找不到对应的组件名字,从而出现渲染出错(eg:MyComponent被浏览器解析成mycomponent,所以能找到才怪)

例子如下:

//全局组件
Vue.component('MyComponent', {
    template: '<div>Hello Vue</div>'
  });

//这里会被解析成小写的<mycomponent></mycomponent>所以找不到这个组件,也就无法渲染了
<MyComponent></MyComponent>
//此时可以使用短横线格式<my-component></my-component>就没问题了
<my-component></my-component>

再来看下另外一句:如果你使用字符串模板，那么这个限制就不存在了。

字符串模板:
字符串模板就是写在vue中的template中定义的模板，如下,.vue的单文件组件也是字符串模板。字符串模板不会一开始参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。

多说无益,上代码

 Vue.component('MyComponentB', {
    template: '<MyComponent></MyComponent>'
  });

//这时候使用标签<MyComponent>竟然能正确渲染,也就是所谓的字符串模板不受限制,先由vue解析之后再渲染
<my-component-b></my-component-b>

另外我建了个vue微信学习群，大家可以一起交流(现在也就4个人。。。)