Vue.js使用props传递数据驼峰式与短横线隔

正在拜读Vue.js官网上的教程。

情况一：

直接上代码

<div id="prop-example-1">
<child my-message='hello!'></child>
</div>

js代码：

	Vue.component('child',{
		props:['myMessage'],
		template:'<span>{
  { myMessage }}</span>'
	});
	new Vue({
		el:'#prop-example-1'
	});

上面的代码作用是将my-message的值传递给自定义组件child中的myMessage。然而my-message和myMessage变量名并不相同，这是怎么了？

官网上提到，html语言不区分大小写，所以在处理my-message时会在js代码中找寻myMessage（猜的...）。

这里就有一个坑了，如果将js代码中的myMessage改为my-message