在vue官網上有這樣的一句話：
“camelCase vs. kebab-case
HTML 屬性是不區分大小寫的。所以，當使用的不是字符串模版，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名： 如果你使用字符串模版，則沒有這些限制。”
##重點在這里：
1、html特性不區分大小寫：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>prop動態=綁定</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> <!--<child v-bind:myMEssage="message"></child>--> <child v-bind:mymessage="message"></child> <!--由於HTML的特性不識別大小寫，所以“myMEssage”與“mymessage”是一樣的，都解析為小寫。故而下邊的組件也應該是小寫。--> </div> <script> Vue.component('child',{ //此處都為小寫。 props:['mymessage'], template:'<p>{{mymessage}}</p>' }); new Vue({ el:'#app', data:{ message:'' } }) </script> </body> </html>
2、組件中使用camelCased（駝峰式）命名，在html中應改為kebab-case（短橫線）命名方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>prop動態=綁定</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> <child v-bind:my-message="message"></child> <!--此處的my-message只能是短橫線命名（若為駝峰式則全部轉換為小寫。）--> </div> <script> Vue.component('child',{ // props:['my-message'], props:['myMessage'],//props中傳遞的數據可以為駝峰式也可以為短橫線式，他們在此處是相互轉換的 template:'<p>{{myMessage}}</p>' // 此處有限制，是字符串模板，{{ }}語法中不能是短橫線連接方式。此處只能是駝峰命名方式。若為短橫線的命名方式，則會報錯。如下圖： }); new Vue({ el:'#app', data:{ message:'' } }) </script> </body> </html>
文章來源：
https://blog.csdn.net/wangxiaoxiaosen/article/details/75005949