Vue.jS組件參數(shù)名命名與組件屬性轉(zhuǎn)化的簡(jiǎn)單介紹

這篇文章主要介紹“Vue.jS組件參數(shù)名命名與組件屬性轉(zhuǎn)化的簡(jiǎn)單介紹”，在日常操作中，相信很多人在Vue.jS組件參數(shù)名命名與組件屬性轉(zhuǎn)化的簡(jiǎn)單介紹問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue.jS組件參數(shù)名命名與組件屬性轉(zhuǎn)化的簡(jiǎn)單介紹”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

HTML 特性是不區(qū)分大小寫(xiě)的。所以，當(dāng)使用的不是字符串模版，camelCased (駝峰式) 命名的 prop 需要轉(zhuǎn)換為相對(duì)應(yīng)的 kebab-case (短橫線隔開(kāi)式) 命名：

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

如果你使用字符串模版，則沒(méi)有這些限制。

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>這個(gè)橫線是在你駝峰式命名的參數(shù)大寫(xiě)字母前加上。 注意上面兩個(gè)代碼片段中的myMessage與my-message，vue.js會(huì)自動(dòng)轉(zhuǎn)化。

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

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

PS：下面看下vue組件參數(shù)傳遞命名

背景

今天在父子組件傳值的時(shí)候，父組件的值死活傳不到子組件中，斷點(diǎn)調(diào)試也沒(méi)有值，后來(lái)打開(kāi)控制臺(tái)發(fā)現(xiàn)警告信息，html語(yǔ)句中不識(shí)別大寫(xiě)字母，再一看，參數(shù)是駝峰命名，難不成是這個(gè)問(wèn)題，遂百度之，確實(shí)如此，html中不支持大下寫(xiě)，所以父組件傳值的時(shí)候，參數(shù)名應(yīng)該用短橫線連接。

注意

錯(cuò)誤示例：

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

正確示例：

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

到此，關(guān)于“Vue.jS組件參數(shù)名命名與組件屬性轉(zhuǎn)化的簡(jiǎn)單介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！