Component 組件props 屬性設置 · web前端

[TOC] # 簡介 props選項就是設置和獲取標簽上的屬性值的，例如我們有一個自定義的組件`<panda></panda>`,這時我們想給他加個標簽屬性寫成<`panda here='China'></panda>` 意思就是熊貓來自中國，當然這里的China可以換成任何值。定義屬性的選項是props # 定義屬性并獲取屬性值定義屬性我們需要用props選項，加上數組形式的屬性名稱，例如：`props:[‘here’]`。在組件的模板里讀出屬性值只需要用插值的形式，例如`{{ here }}`. ~~~ <body> <div id="app"> <panda here="china"></panda> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', components: { "panda": { template: `<div style="color:red;">param from {{here}}</div>`, props: ['here'] } } }); </script> ~~~ 上面的代碼定義了panda的組件，并用props設置了here的屬性值，在here屬性值里傳遞了China給組件。最后輸出的結果是紅色字體的Panda from China # 屬性中帶’-‘的處理方式我們在寫屬性時經常會加入’-‘來進行分詞，比如：`<panda from-here="China"></panda>`，那這時我們在props里如果寫成`props:['form-here']`是錯誤的，我們必須用小駝峰式寫法`props:['formHere']` html ~~~ <panda from-here="China"></panda> ~~~ javascript文件： ~~~ var app=new Vue({ el:'#app', components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['fromHere'] } } }) ~~~ PS：因為這里有坑，所以還是少用-為好 # 在構造器里向組件中傳值把構造器中data的值傳遞給組件，我們只要進行綁定就可以了。就是我們第一季學的`v-bind:xxx.` 我們直接看代碼: Html文件： ~~~ <panda v-bind:here="message"></panda> ~~~ javascript文件： ~~~ var app=new Vue({ el:'#app', data:{ message:'SiChuan' }, components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['here'] } } }) ~~~