Prop的基本用法很簡單,只須要在子組件的Vue實例中定義該屬性並把值設爲目標屬性的數組便可數組
Vue.component('child', { ... // 接收message props: ['message'] ... })
/* 父組件 */ <child type="video"></child> /* 子組件 */ Vue.component('child', { ... // 成功接收 props: ['type'] ... })
全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定:父組件的 Prop 的更新會向下流動到子組件中,可是反過來則不行。
這樣會防止從子組件意外改變父組件以及同級子組件的狀態,從而致使你的應用的數據流向難以理解。ide
<div> <p>{{newMessage}}</p> </div> ... props: ['message'], computed:{ newMessage(){ return this.message; } } ...
<div id="root"> <div content="hello"></div> </div>
props: [data1, data2]
數組形式至關於直接接收消息,不作任何校驗,通常來講,不太建議使用數組形式。函數
2.簡單對象形式post
props: { data1: String, data2: Array}
簡單對象形式對父組件傳遞的值進行了類型校驗,若是傳過來的值類型不一致,控制檯會報錯。ui
3.複雜對象形式this
props: { data1: { type: String, //設定類型 required: true, //是否必須 default: 'default value', //默認值 validator (value) { return (value.length < 5) } }, //校驗規則 data2: { type: Array, required: true, default: () => ['', '', ''] }}
【!】 注意那些 prop 會在一個組件實例建立以前進行驗證,因此實例的屬性 (如 data、computed 等) 在 default 或 validator 函數中是不可用的。code
type 能夠是下列原生構造函數中的一個:component
String Number Boolean Array Object Date Function Symbol
額外的,type 還能夠是一個自定義的構造函數,而且經過 instanceof 來進行檢查確認。對象
例如,給定下列現成的構造函數:blog
function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName }
Vue.component('blog-post', { props: { author: Person } })