這兩天學(xué)習(xí)了Vuejs Prop感覺這個地方知識點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記。

一、使用Prop傳遞數(shù)據(jù)

組件實(shí)例的作用域是孤立的。這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。可以使用props把數(shù)據(jù)傳給子組件。

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

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

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

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

結(jié)果：

hello!

二、camelCase vs.kebab-case

html不區(qū)分大小寫。當(dāng)使用非字符串模板時(shí)，prop的名字形式會從camelCase轉(zhuǎn)為kebab-case（短橫線隔開）：

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

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

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

三、動態(tài)Prop

類似于用v-bind綁定HTML特性到一個表達(dá)式，也可以用v-bind動態(tài)綁定props的值到父組件的數(shù)據(jù)中。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會傳導(dǎo)給子組件。

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

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

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

四、字面量語法vs動態(tài)語法

因?yàn)樗且粋€字面prop ，它的值以字符串 "1" 而不是以實(shí)際的數(shù)字傳下去。如果想傳遞一個實(shí)際的 JavaScript 數(shù)字，需要使用 v-bind ，從而讓它的值被當(dāng)作 javascript 表達(dá)式計(jì)算：

五、單項(xiàng)數(shù)據(jù)流

prop是單項(xiàng)綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態(tài)——這會讓應(yīng)用的數(shù)據(jù)流難以理解。同時(shí)，這也很好理解，父組件是子組件的高度抽象，表示子組件的共有部分，一個組件的數(shù)據(jù)改變并不會改變其抽象，然而其抽象的改變卻代表著所有子組件的改變。

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

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

1.prop作為初始值傳入，子組件之后只是將它的初始值作為本地?cái)?shù)據(jù)的初始值使用；

2.prop作為需要被轉(zhuǎn)變的原始值傳入。

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