Prop

基本用法

Prop的基本用法很簡單，只需要在子組件的Vue實例中定義該屬性并把值設(shè)為目標(biāo)屬性的數(shù)組即可

Vue.component('child', {
 ...
 // 接收message
 props: ['message']
 ...
})

tips：由于HTML中的屬性是不區(qū)分大小寫的，所以當(dāng)使用DOM中的模板（HTML中）時，駝峰寫法需要轉(zhuǎn)化為短橫線寫法。但是，如果使用字符串模板（JS中）時，不受限制，可以為所欲為。

Prop中的靜態(tài)和動態(tài)值

在正常情況下，一般在父組件中通過v-bind定義一個動態(tài)值，子組件通過Prop接收該值，所以，很多人認(rèn)為，Prop只能接收動態(tài)值。但是，其實Prop可以接受靜態(tài)屬性。

示例：

/* 父組件 */
<child type="video"></child>

/* 子組件 */
Vue.component('child', {
 ...
 // 成功接收
 props: ['type']
 ...
})

在示例中，父組件在子組件標(biāo)簽上定義了靜態(tài)屬性type，子組件依然通過Prop拿到了靜態(tài)屬性type。

單向數(shù)據(jù)流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父組件的 Prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父組件以及同級子組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。

另外，每次父組件發(fā)生更新時，子組件中所有的Prop都將刷新為最新的值。這意味著你不應(yīng)該在子組件內(nèi)部改變Prop，如果你這樣做了，Vue會在控制臺拋出一個警告。

一般來說，如果子組件需要操作Prop中的值，需要將Prop中的值賦值給本地定義的屬性：

...
props: ['message'],
data () {
 return {
  mes: this.message
 }
}
...

非Prop特性

非Props特性是指在組件上定義了屬性，而又沒有使用Prop接受屬性。此時，子組件內(nèi)不可使用該屬性值，該屬性會直接添加到子組件的根節(jié)點上。

比如，在一個只含有一個div的子組件上，如果我向子組件傳了一個content屬性，但是子組件不使用Prop接收content屬性，則渲染結(jié)果為：

<div id="root">
  <div content="hello"></div>
</div>

Prop校驗

子組件用Props接收父組件傳來的消息有多種形式：

1.數(shù)組形式

props: [data1, data2]

數(shù)組形式相當(dāng)于直接接收消息，不做任何校驗，一般來說，不太建議使用數(shù)組形式。

2.簡單對象形式

props: {
 data1: String,
 data2: Array
}

簡單對象形式對父組件傳遞的值進(jìn)行了類型校驗，如果傳過來的值類型不一致，控制臺會報錯。

3.復(fù)雜對象形式

props: {
 data1: {
  type: String,
  required: true,
  default: 'default value',
  validator (value) {
   return (value.length < 5)
  }
 },
 data2: {
  type: Array,
  required: true,
  default: () => ['', '', '']
 }
}

復(fù)雜對象形式的情況下，作為對象屬性的參數(shù)可以寫為對象形式，參數(shù)對象含有4個屬性，type、required、default、validator。

type：設(shè)定參數(shù)類型，當(dāng)傳入?yún)?shù)類型與type不相符時，控制臺會報錯

required：設(shè)定參數(shù)是否是必傳，當(dāng)設(shè)為true時，不傳該參數(shù)會報錯

default：設(shè)定默認(rèn)值，當(dāng)參數(shù)類型為復(fù)雜類型時，需使用工廠模式生成默認(rèn)值，否則Vue會在控制臺拋出警告。如圖所示，就通過工廠模式生成了一個長度為3的空數(shù)組。

validator：校驗器，是一個函數(shù)，擁有一個代表傳入值的形參，可以自定義各種校驗，當(dāng)返回false時，會報錯，表示沒通過校驗。

最新評論