本篇資料來于官方文檔：
http://cn.vuejs.org/guide/components.html#Props
本教程是小編結合官方文檔整理的一套更加細致，代碼更多更全的教程，特別適合新手閱讀。
props數據傳遞
①組件實例的作用域：
是孤立的，簡單的來說，組件和組件之間，即使有同名屬性，值也不共享。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
varvm =newVue({
el:'#app',
components: {
"add": {
template:"btn：{{btn}}",
data:function() {
return{btn:"123"};
}
},
del: {
template:"btn：{{btn}}",
data:function() {
return{btn:"456"};
}
}
}
});
渲染結果是：
2個按鈕，第一個的值是123，第二個的值是456（雖然他們都是btn）
②使用props綁定靜態(tài)數據：
【1】這種方法用于傳遞字符串，且值是寫在父組件自定義元素上的。
【2】下面示例中的寫法，不能傳遞父組件data屬性中的值
【3】會覆蓋模板的data屬性中，同名的值。
示例代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
varvm =newVue({
el:'#app',
data: {
h:"hello"
},
components: {
"add": {
props: ['btn'],
template:"btn：{{btn}}",
data:function() {
return{btn:"123"};
}
}
}
});
這種寫法下，btn的值是h，而不是123，或者是hello。
【4】駝峰寫法
假如插值是駝峰式的，
而在html標簽中，由于html的特性是不區(qū)分大小寫（比如LI和li是一樣的），因此，html標簽中要傳遞的值要寫成短橫線式的（如btn-test），以區(qū)分大小寫。
而在props的數組中，應該和插值保持一致，寫成駝峰式的（如btnTest）。
例如：
1
2props: ['btnTest'],
template:"btn：{{btnTest}}",
正確的寫法：
1
假如插值寫短橫線式，或者是html標簽寫成駝峰式，都不能正常生效。（除非插值不寫成駝峰式——跳過大小寫的限制，才可以）
③利用props綁定動態(tài)數據：
簡單來說，就是讓子組件的某個插值，和父組件的數據保持一致。
標準寫法是（利用v-bind）：
1
如代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
varvm =newVue({
el:'#app',
data: {
h:"hello"
},
components: {
"add": {
props: ['btn'],
template:"btn：{{btn}}",
data:function() {
return{'btn':"123"};//子組件同名的值被覆蓋了
}
}
}
});
說明：
【1】btn使用的父組件data中 h的值；
【2】子組件的data的函數中返回值被覆蓋了。
【3】也就是說，使用v-bind的是使用父組件的值（根據屬性名），沒有使用v-bind的是將標簽里的數值當做字符串來使用。
【4】依然需要使用props，否則他會取用自己data里的btn的值
④字面量和動態(tài)語法：
【1】簡單來說，不加v-bind的，傳遞的是字面量，即當做字符串（例如1也是字符串，而不是number類型）；
【2】加上v-bind的，傳遞的是JS表達式（因此才能傳遞父組件的值）；
【3】加上v-bind后，如果能找到父組件的值，那么使用父組件的值；如果沒有對應的，則將其看做一個js表達式（例如1+2看做3，{a:1}看做是一個對象）；
如代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
varvm =newVue({
el:'#app',
data: {
h:"hello"
},
components: {
"add": {
props: ['btn'],
template:"btn：{{btn}}"
}
}
});
這里的btn的值是3（而不是沒有加v-bind時，作為字符串的1+2）
⑤props的綁定類型：
【1】簡單來說，分為兩種類型，即單向綁定（父組件能影響子組件，但相反不行）和雙向綁定（子組件也能影響父組件）；
【2】單向綁定示例：（默認，或使用.once）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
父組件：
子組件：
varvm =newVue({
el:'#app',
data: {
val: 1
},
components: {
"test": {
props: ['testVal'],
template:""
}
}
});
說明：
當父組件的值被更改后，子組件的值也隨之更改；
當子組件的值被更改后，父組件的值不會變化，而假如再次修改父組件的值，子組件會再次同步。
另外需要注意的是，子組件如果要同步綁定，那么子組件的input需要是v-model，而不能是value屬性（那樣只能單項綁定，且修改子組件的值后會失去綁定）
【3】雙向綁定：
需要使用“.sync”作為修飾詞
如示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
父組件：
子組件：
varvm =newVue({
el:'#app',
data: {
val: 1
},
components: {
"test": {
props: ['test'],
template:""
}
}
});
效果是無論你改哪一個的值，另外一個都會隨之變動。
【4】props驗證：
簡單來說，當組件獲取數據時，進行驗證，只有符合條件的時候，才會使用之。
寫法是將props變?yōu)橐粋€對象，被驗證是值是對象的key，驗證條件是和key對應的value。
例如：
1
2
3
4
5props: {
test: {
twoWay:true
}
},
驗證test這個變量是不是雙向綁定，如果不是，則報錯。（注意，這個不能用于驗證單向綁定）。
示例代碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
父組件：
子組件：
varvm =newVue({
el:'#app',
data: {
val: 1
},
components:{
test:{
props: {
test: {
twoWay:true
}
},
template:""
}
}
});
更多驗證類型請查看官方教程：
