Prop

基本用法

Prop的基本用法很簡單，只需要在子元件的Vue例項中定義該屬性並把值設為目標屬性的陣列即可

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

tips：由於HTML中的屬性是不區分大小寫的，所以當使用DOM中的模板（HTML中）時，駝峰寫法需要轉化為短橫線寫法。但是，如果使用字串模板（JS中）時，不受限制，可以為所欲為。

Prop中的靜態和動態值

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

示例：

/* 父元件 */
<child type="video"></child>
 
/* 子元件 */
Vue.component('child', {
 ...
 // 成功接收
 props: ['type']
 ...
})

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

在示例中，父元件在子元件標籤上定義了靜態屬性type，子元件依然通過Prop拿到了靜態屬性type。

單向資料流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父元件的 Prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外改變父元件以及同級子元件的狀態，從而導致你的應用的資料流向難以理解。

另外，每次父元件發生更新時，子元件中所有的Prop都將重新整理為最新的值。這意味著你不應該在子元件內部改變Prop，如果你這樣做了，Vue會在控制檯丟擲一個警告。

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

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

非Prop特性

非Props特性是指在元件上定義了屬性，而又沒有使用Prop接受屬性。此時，子元件內不可使用該屬性值，該屬性會直接新增到子元件的根節點上。

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

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

Prop校驗

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

1.陣列形式

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: () => ['', '', '']
 }
}

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

複雜物件形式的情況下，作為物件屬性的引數可以寫為物件形式，引數物件含有4個屬性，type、required、default、validator。

type：設定引數型別，當傳入引數型別與type不相符時，控制檯會報錯

required：設定引數是否是必傳，當設為true時，不傳該引數會報錯

default：設定預設值，當引數型別為複雜型別時，需使用工廠模式生成預設值，否則Vue會在控制檯丟擲警告。如圖所示，就通過工廠模式生成了一個長度為3的空陣列。

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