HTML 特性是不區分大小寫的。所以，當使用的不是字符串模版，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名：

Vue.component('child', {// camelCase in JavaScriptprops: ['myMessage'],template: '<span>{{ myMessage }}</span>'})

如果你使用字符串模版，則沒有這些限制。

<!-- kebab-case in HTML --><child my-message="hello!"></child>這個橫線是在你駝峰式命名的參數大寫字母前加上。 注意上面兩個代碼片段中的myMessage與my-message，vue.js會自動轉化。

如果你注意看瀏覽器的控制臺輸出，里面也有信息提示。

如果你定義的prop參數不是駝峰式的，那就不用加橫線，寫的什么就用什么名。

PS：下面看下vue組件參數傳遞命名

背景

今天在父子組件傳值的時候，父組件的值死活傳不到子組件中，斷點調試也沒有值，后來打開控制臺發現警告信息，html語句中不識別大寫字母，再一看，參數是駝峰命名，難不成是這個問題，遂百度之，確實如此，html中不支持大下寫，所以父組件傳值的時候，參數名應該用短橫線連接。

注意

錯誤示例：

<my-component :userName='userName'></my-component>

正確示例：

<my-component :userName='userName'></my-component>

總結

以上所述是小編給大家介紹的VueJS 組件參數名命名與組件屬性轉化問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！