本文主要介紹了VueJS 元件引數名命名與元件屬性轉化問題，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

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

Vue.component('child', {
// camelCase in JavaScript
props: ['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>

結語

感謝您的觀看，如有不足之處，歡迎批評指正。