本文主要介紹了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>
結語
感謝您的觀看,如有不足之處,歡迎批評指正。