基本用法
Prop的基本用法很簡單，只需要在子組件的Vue實例中定義該屬性並把值設為目標屬性的數組即可
Vue.component('child', {
...
// 接收message
props: ['message']
...
})
- 由於HTML中的屬性是不區分大小寫的，所以當使用DOM中的模板（HTML中）時，駝峰寫法需要轉化為短橫線寫法。但是，如果使用字符串模板（JS中）時，不受限制，可以為所欲為。
Prop中的靜態和動態值
- 在正常情況下，一般在父組件中通過v-bind定義一個動態值，子組件通過Prop接收該值，所以，很多人認為，Prop只能接收動態值。但是，其實Prop可以接受靜態屬性。
/* 父組件 */
<child type="video"></child>
/* 子組件 */
Vue.component('child', {
...
// 成功接收
props: ['type']
...
})
- 在示例中，父組件在子組件標簽上定義了靜態屬性type，子組件依然通過Prop拿到了靜態屬性type。
單向數據流
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父組件的 Prop 的更新會向下流動到子組件中，但是反過來則不行。
這樣會防止從子組件意外改變父組件以及同級子組件的狀態，從而導致你的應用的數據流向難以理解。
- 另外，每次父組件發生更新時，子組件中所有的Prop都將刷新為最新的值。這意味着你不應該在子組件內部改變Prop，如果你這樣做了，Vue會在控制台拋出一個警告。
一般來說，如果子組件需要操作Prop中的值，需要將Prop中的值賦值給本地定義的屬性：
<div>
<p>{{newMessage}}</p>
</div>
...
props: ['message'],
computed:{
newMessage(){
return this.message;
}
}
...
非Prop特性
- 非Props特性是指在組件上定義了屬性，而又沒有使用Prop接受屬性。此時，子組件內不可使用該屬性值，該屬性會直接添加到子組件的根節點上。
比如，在一個只含有一個div的子組件上，如果我向子組件傳了一個content屬性，但是子組件不使用Prop接收content屬性，則渲染結果為：
<div id="root">
<div content="hello"></div>
</div>
Prop校驗
- 子組件用Props接收父組件傳來的消息有多種形式：
- 數組形式
props: [data1, data2]
數組形式相當於直接接收消息，不做任何校驗，一般來說，不太建議使用數組形式。
2.簡單對象形式
props: { data1: String, data2: Array}
簡單對象形式對父組件傳遞的值進行了類型校驗，如果傳過來的值類型不一致，控制台會報錯。
3.復雜對象形式
props: {
data1: {
type: String, //設定類型
required: true, //是否必須
default: 'default value', //默認值
validator (value) { return (value.length < 5) } }, //校驗規則
data2: {
type: Array,
required: true,
default: () => ['', '', '']
}}
-
復雜對象形式的情況下，作為對象屬性的參數可以寫為對象形式，參數對象含有4個屬性，
- type
- required
- default
- validator
-
type：設定參數類型，當傳入參數類型與type不相符時，控制台會報錯
-
required：設定參數是否是必傳，當設為true時，不傳該參數會報錯
-
default：設定默認值，當參數類型為復雜類型時，需使用工廠模式生成默認值，否則Vue會在控制台拋出警告。如圖所示，就通過工廠模式生成了一個長度為3的空數組。
-
validator：校驗器，是一個函數，擁有一個代表傳入值的形參，可以自定義各種校驗，當返回false時，會報錯，表示沒通過校驗。
【！】 注意那些 prop 會在一個組件實例創建之前進行驗證，所以實例的屬性 (如 data、computed 等) 在 default 或 validator 函數中是不可用的。
類型檢查
type 可以是下列原生構造函數中的一個：
String
Number
Boolean
Array
Object
Date
Function
Symbol
-
額外的，type 還可以是一個自定義的構造函數，並且通過 instanceof 來進行檢查確認。
例如，給定下列現成的構造函數：
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
- 你可以使用：
Vue.component('blog-post', {
props: {
author: Person
}
})
- 來驗證 author prop 的值是否是通過 new Person 創建的。