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，页面则会输出NaN，并且没有任何警告。

情况二：

html代码：

<div id="dynamic-prop">
<input v-model="parentMsg" number>
<br>
<child-dynamic v-bind:my-message="parentMsg"></child-dynamic>
</div>

js代码：

new Vue({
el:'#dynamic-prop',
data:{
parentMsg:0
},
components:{
'child-dynamic':{
props:{
myMessage: Number,
},
template:'<span>{{ myMessage }}</span>'
}
}
});

注意，在html代码中自定义了组件child-dynamic，在js代码的components构造器中使用'child-dynamic'（加单引号了）来指定child-dynamic组件，这里也可以在js中使用childDynamic（没有单引号）来指定child-dynamic组件