Vue元件引數名命名與元件屬性轉化示例

2021-09-13 01:59:17 字數 718 閱讀 4695

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

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

vue.component('child', }'

})

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

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

//注意上面兩個**片段中的mymessage與my-message,vue.js會自動轉化。

如果你注意看瀏覽器的控制台輸出,裡面也有資訊提示。

如果你定義的prop引數不是駝峰式的,那就不用加橫線,寫的什麼就用什麼名。

ps:下面看下vue元件引數傳遞命名

背景

注意

錯誤示例:

正確示例:

結語

Vue元件 元件的屬性

在html中使用元素,會有一些屬性,如class,id,還可以繫結事件,自定義元件也是可以的。當在乙個元件中,使用了其他自定義元件時,就會利用子元件的屬性和事件來和父元件進行資料交流。比如,子元件需要某個資料,就在內部定義乙個prop屬性,然後父元件就像給html元素指定特性值一樣,把自己的data...

vue元件命名風格

單檔案元件的檔名應該要麼始終是單詞大寫開頭 pascalcase 要麼始終是橫線連線 kebab case 單詞大寫開頭對於 編輯器的自動補全最為友好,因為這使得我們在 js x 和模板中引用元件的方式盡可能的一致。然而,混用檔案命名方式有的時候會導致大小寫不敏感的檔案系統的問題,這也是橫線連線命名...

vue呼叫元件的屬性 Vue 元件例項屬性的使用

前言 因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會...