VueJS 組件參數名命名方式和前台顯示

camelCase（駝峰式） 和. kebab-case（短橫線式）

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>

這個橫線是在你駝峰式命名的參數大寫字母前加上。

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