這兩天學習了Vuejs Prop感覺這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。

一、使用Prop傳遞數據

組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內直接引用父組件的數據?？梢允褂胮rops把數據傳給子組件。

prop是父組件用來傳遞數據的一個自定義屬性。子組件需要顯示的地用props選項聲明”prop”

Vue.component('child',{  props:['message'],  template:'<span>{{ message }}</span>'})

然后向它傳入一個普通字符串：

<child message="hello!"></child>

結果：

hello!

二、camelCase vs.kebab-case

html不區分大小寫。當使用非字符串模板時，prop的名字形式會從camelCase轉為kebab-case（短橫線隔開）：

//camelCaseVue.component('child',{  props:['myMessage'],  template:'<span>{{ message }}</span>'})

//kebab-case<child my-message="hello!"></child>

再次說明，如果你是用字符串模板，不用在意這些限制。

三、動態Prop

類似于用v-bind綁定HTML特性到一個表達式，也可以用v-bind動態綁定props的值到父組件的數據中。每當父組件的數據變化時，該變化也會傳導給子組件。

<div>  <input v-model="parrentMsg">  <br>  <child v-bind:my-message="parrentMsg"></child></div>

使用v-bind的縮寫語法通常更簡單：

<child :my-message="parrentMsg"></child>

四、字面量語法vs動態語法

因為它是一個字面prop ，它的值以字符串 "1" 而不是以實際的數字傳下去。如果想傳遞一個實際的 JavaScript 數字，需要使用 v-bind ，從而讓它的值被當作 javascript 表達式計算：

五、單項數據流

prop是單項綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態――這會讓應用的數據流難以理解。同時，這也很好理解，父組件是子組件的高度抽象，表示子組件的共有部分，一個組件的數據改變并不會改變其抽象，然而其抽象的改變卻代表著所有子組件的改變。

另外，每次組漸漸更新時，子組件的所有prop都會更新為最新值。這意味著你不應該在子組件內部改變prop。如果你這么做了，Vue會在控制臺給出警告。

通常有兩種改變prop的情況：

1.prop作為初始值傳入，子組件之后只是將它的初始值作為本地數據的初始值使用；

2.prop作為需要被轉變的原始值傳入。

更確切地說這兩種情況是：
a.定義一個局部data屬性，并將prop的初始值作為局部數據的初始值。

“` props: [‘initialCounter'], data: function () { return { counter: this.initialCounter} }

b.定義一個 computed 屬性，此屬性從 prop 的值計算得出。

  ```  props: ['size'],  computed: {    normalizedSize: function () {     return this.size.trim().toLowerCase()   }  }

六、Prop驗證

組件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發出警告。當組件給其他人使用時這很有用。
prop 是一個對象而不是字符串數組時，它包含驗證要求：

Vue.component('example', { 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   }  } }})

type可以是下面的原生構造器：

• String
• Number
• Boolean
• Function
• Object
• Array

type也可以是一個自定義構造器，使用instanceof檢測。當prop驗證失敗了，如果使用的是開發版本會拋出一條警告。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。