Deck gl ReactPoolprops

props 屬性| 勇者鬥Vue 龍

文章推薦指數： 80 %
投票人數：10人

子組件可以設定 props 屬性，而父組件可以將這些屬性用DOM 客製屬性設定在子組件上，在 ... JavaScript 中使用camelCase Vue.component('component-string', { props: ... 基礎 GitHub (opensnewwindow)踏上旅程之前初探Vue.jsVue實例Vue實體的生命週期模板語法Part1-Mustache標籤模板語法Part2-Directives計算屬性監聽器(watch)計算屬性與監聽器的比較Class的綁定樣式綁定條件渲染列表渲染響應系統使用set新增實體中的屬性事件處理v-on的修飾符Part1-事件修飾符v-on的修飾符Part2-按鍵修飾符表單綁定組件基礎組件間的資料傳輸組件註冊props屬性屬性命名傳入靜態或動態屬性DEMO結語參考資料屬性驗證屬性注意事項客製事件插槽動態組件非同步組件尋訪其他組件依賴注入事件監聽器模板定義父元件及子元件間的生命週期(Lifecycle)#props屬性子組件可以設定props屬性，而父組件可以將這些屬性用DOM客製屬性設定在子組件上，在子組件內就可以當作實體中的屬性使用，本文會詳細的介紹props屬性的用法。

#屬性命名HTML屬性需要使用kebab-case，全小寫並使用分隔符號(-)來設定，因此雖然在JavaScript內可以用camelCase設定，但在HTML屬性上還是要用kebab-case給予屬性值。

以下面的例子說明://JavaScript中使用camelCase Vue.component('component-string',{ props:['firstName','lastName'], template:`

FirstName:{{firstName}}
LastName:{{lastName}}
`, }); 雖然在HTML屬性中一定要使用kebab-case，但在字串模板上可以使用camelCase。

如下例所示:varvm=newVue({ el:'#app2', //在字串模板上可以用camelCase設定屬性 template:` ` }); #傳入靜態或動態屬性在屬性上我們可以將客製屬性當成一般屬性設定，沒有使用v-bind的屬性會將值當作靜態字串讀入，而有v-bind的會當作實體中的物件對待。

我們繼續用component-name當作例子: first-name:靜態屬性，它的值是Peter字串。

last-name:動態屬性，它的值是實體中的lastName資料屬性。

屬性的值也可以綁定JavaScript的表達式: 上面的例子是綁定string類型的屬性，下面介紹綁定各個類型的屬性。

#數字 age:一般的HTML屬性，會將值視為字串類型。

:height:綁定height資料屬性，類型以資料類型決定。

:weight:綁定數字，會將值視為數字類型。

在組件中輸出各屬性的值跟其類型:Vue.component('component-number',{ props:['age','height','weight'], template:`
Age:{{age}},{{typeofage}}
Height:{{height}},{{typeofheight}}
Weight:{{weight}},{{typeofweight}}
`, }) 結果如下:#布林值 :male:綁定isMale資料屬性。

female:綁定字串false。

:love-coding:綁定JavaScript表達式true，所以得到的值是true的布林值。

我們在畫面上輸出判斷式及類型:Vue.component('component-boolean',{ props:['male','female','loveCoding'], template:`
Male:{{male}},{{male?'Yes':'No'}},{{typeofmale}}
Female:{{female}},{{female?'Yes':'No'}},{{typeoffemale}}
Lovecoding:{{loveCoding}},{{loveCoding?'Yes':'No'}},{{typeofloveCoding}}
`, }) 結果如下:可以看到Female的類型因為是字串，所以造成判斷錯誤，這是容易犯的錯，要小心。

#陣列 必須使用v-bind綁定，否則會被視為字串。

#物件 必須使用v-bind綁定，否則會被視為字串。

#傳入物件屬性如果你想要將所有的屬性集合成一個物件傳入，可以直接使用v-bind綁定。

例如我們要傳入firstName及lastName，可以依照下面這樣做: 使用v-bind綁定name資料屬性，而資料結構如下:varvm=newVue({ el:'#app', data:{ name:{ firstName:'Peter', lastName:'Chen', }, }, }); 這樣的綁定方式等於: #DEMOCodePen(opensnewwindow)#結語本文介紹了props屬性的命名及各種不同類型的設定方式。

#參考資料Vue.jsGuide:Props(opensnewwindow) ← 組件註冊 屬性驗證 →

請為這篇文章評分？

延伸文章資訊