名稱書寫規范
- HTML 特性是不區分大小寫的。所以，camelCase (駝峰式命名) 的 Prop 需要轉換為相對應的 kebab-case (短橫線分隔式命名)：
組件myHeader中配置：
props: ['myMessage']
調用時：
<my-header my-message='hello!'></my-header>
動態綁定prop
- 使用v-bind動態的將Prop綁定到父組件的數據。每當父組件的數據變化時，該變化也會傳導給子組件。
- 如果你想把一個對象的所有屬性作為 Prop 進行傳遞，可以使用不帶任何參數的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一個 todo 對象：
todo: {
text: 'Learn Vue',
isComplete: false
}
---------------------綁定------------------
<todo-item v-bind="todo"></todo-item>
--------------------等價于-----------------
<todo-item
v-bind:text="todo.text"
v-bind:is-complete="todo.isComplete"
></todo-item>
單向數據流
- 每次父組件更新時，子組件的所有 Prop 都會更新為最新值。這意味著你不應該在子組件內部改變 Prop。
- 如果你想：
- Prop 作為初始值傳入后，子組件想把它當作局部數據來用；
- Prop 作為原始數據傳入，由子組件處理成其它數據輸出;
-
正確的應對方式：
-----------1.定義一個局部變量，并用 prop 的值初始化它：
props: ['initialCounter'],
data: function () { //將initialCounter復制給當前組件的局部變量counter
return { counter: this.initialCounter }
}
-----------2.定義一個計算屬性，處理 prop 的值并返回：
props: ['size'],
computed: {
normalizedSize: function () { //將size處理最后返回normalizedSize
return this.size.trim().toLowerCase()
}
}
Prop驗證
- 給你期望的Prop規定類型、默認值、是否必須、驗證函數...
- type default required validator
props: {
// 基礎類型檢測 (`null` 指允許任何類型)
propA: Number,
// 可能是多種類型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數值且有默認值
propD: {
type: Number,
default: 100
},
// 數組/對象的默認值應當由一個工廠函數返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定義驗證函數
propF: {
validator: function (value) {
return value > 10
}
}
}
!!! 數組/對象的默認值應當由一個工廠函數返回
