用來(lái)接收父組件傳給子組件的數(shù)據(jù)，可以在組件上注冊(cè)一些自定義特性挪哄，當(dāng)一個(gè)值傳遞給一個(gè)prop特性的時(shí)候，它就變成那個(gè)組件實(shí)例的一個(gè)屬性。
用法：
// 父組件
<child message="this is message"></child>
// 在子組件中定義
Vue.component('child', {
...
props: ['message']
...
})
假設(shè)此時(shí)的 message 的命名被 myMessage 時(shí)硕勿，父組件應(yīng)該寫(xiě)為：
<child my-message="this is message"></child>
因?yàn)镠TML中的名大小寫(xiě)不敏感，所以瀏覽器會(huì)把所有大寫(xiě)字符解釋為小寫(xiě)字符枫甲。
傳遞靜態(tài)或動(dòng)態(tài)prop
靜態(tài)傳入
// 父組件
<child message="this is message"></child>
// 在子組件中定義
Vue.component('child', {
...
props: ['message']
...
})
動(dòng)態(tài)傳入
<!-- 通過(guò)v-bind動(dòng)態(tài)賦值 -->
// 父組件
<child v-bind:message="msg"></child>
// 在子組件中定義
Vue.component('child', {
...
props: ['message']
...
})
單項(xiàng)數(shù)據(jù)流
- 是單向綁定的源武，當(dāng)父組件的屬性變化時(shí)扼褪，將傳導(dǎo)給子組件，但是不會(huì)反過(guò)來(lái)粱栖。
- 每次父組件發(fā)生更新時(shí)话浇，子組件中所有的Prop都將刷新為最新的值。這意味著你不應(yīng)該在子組件內(nèi)部改變Prop闹究，如果你這樣做了幔崖，Vue會(huì)在控制臺(tái)拋出一個(gè)警告。
1渣淤、如果子組件需要操作prop中的值赏寇，需要將prop中的值賦值給本地定義屬性：
props: ['message'],
data: function () {
return {
counter: this.message
}
}
2、這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換价认。在這種情況下嗅定，最好使用這個(gè) prop 的值來(lái)定義一個(gè)計(jì)算屬性：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
prop驗(yàn)證
我們可以為組件的 prop 指定驗(yàn)證要求。如果有一個(gè)需求沒(méi)有被滿足用踩，則會(huì)出錯(cuò)渠退。
Vue.component('my-component', {
props: {
// 基礎(chǔ)的類(lèi)型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類(lèi)型驗(yàn)證)
propA: Number,
// 多個(gè)可能的類(lèi)型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認(rèn)值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認(rèn)值的對(duì)象
propE: {
type: Object,
// 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
default: function () {
return { message: 'hello' }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
// 這個(gè)值必須匹配下列字符串中的一個(gè)
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
