學(xué)習(xí)vue必不可少的一個(gè)環(huán)節(jié)就是數(shù)據(jù)之間的傳遞，下面我們?cè)敿?xì)介紹下父組件如何向子組件傳遞數(shù)據(jù)的咆霜。
1組件實(shí)例的作用域
組件是孤立的王财，簡(jiǎn)單的來(lái)說(shuō)，組件和組件之間裕便，即使有同名屬性绒净，值也不共享。案例如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<add></add>
<del></del>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
components: {
"add": {
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "123"};
}
},
del: {
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "456"};
}
}
}
});
</script>
渲染結(jié)果：
2個(gè)按鈕偿衰，第一個(gè)的值是123挂疆，第二個(gè)的值是456（雖然他們都是btn）
2使用props綁定靜態(tài)數(shù)據(jù)
(1)這種方法用于傳遞字符串，且值是寫在父組件自定義元素上的下翎。
(2)下面示例中的寫法缤言，不能傳遞父組件data屬性中的值
(3)會(huì)覆蓋模板的data屬性中，同名的值视事。
案例如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<add btn="h"></add>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "123"};
}
}
}
});
</script>
渲染結(jié)果：
btn的值是h胆萧，即不是123也不是hello。
（4）駝峰寫法
假如插值是駝峰式的俐东，
而在html標(biāo)簽中跌穗，由于html的特性是不區(qū)分大小寫（比如LI和li是一樣的），因此虏辫，html標(biāo)簽中要傳遞的值要寫成短橫線式的（如btn-test）蚌吸，以區(qū)分大小寫。
而在props的數(shù)組中砌庄，應(yīng)該和插值保持一致羹唠，寫成駝峰式的（如btnTest）奕枢。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<add btn-test="h"></add>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btnTest'],
template: "<button>btn：{{btnTest}}</button>",
data: function () {
return {btn: "123"};
}
}
}
});
</script>
渲染結(jié)果：
btn的值是h
3利用props綁定動(dòng)態(tài)數(shù)據(jù)
簡(jiǎn)單來(lái)說(shuō)，就是讓子組件的某個(gè)插值佩微，和父組件的數(shù)據(jù)保持一致缝彬。
標(biāo)準(zhǔn)寫法是（利用v-bind）：
(1)btn使用的父組件data中 h的值；
(2)子組件的data的函數(shù)中返回值被覆蓋了哺眯。
(3)也就是說(shuō)跌造，使用v-bind的是使用父組件的值（根據(jù)屬性名），沒有使用v-bind的是將標(biāo)簽里的數(shù)值當(dāng)做字符串來(lái)使用族购。
(4)依然需要使用props壳贪，否則他會(huì)取用自己data里的btn的值
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<add v-bind:btn="h"></add>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>",
data: function () {
return {'btn': "123"}; //子組件同名的值被覆蓋了
}
}
}
});
</script>
props的綁定類型：
(1)單向綁定
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
父組件：
<input v-model="val"><br/>
子組件：
<test v-bind:test-Val="val"></test>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
"test": {
props: ['testVal'],
template: "<input v-model='testVal'/>"
}
}
});
</script>
說(shuō)明：
當(dāng)父組件的值被更改后，子組件的值也隨之更改寝杖；
當(dāng)子組件的值被更改后违施，父組件的值不會(huì)變化，而假如再次修改父組件的值瑟幕，子組件會(huì)再次同步磕蒲。
另外需要注意的是，子組件如果要同步綁定只盹，那么子組件的input需要是v-model辣往，而不能是value屬性（那樣只能單項(xiàng)綁定，且修改子組件的值后會(huì)失去綁定）
(2)雙向綁定：
需要使用“.sync”作為修飾詞
如示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
父組件：
<input v-model="val"><br/>
子組件：
<test :test.sync="val"></test>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
"test": {
props: ['test'],
template: '<div @click="increment">{{test}}</div>',
methods: {
increment: function() {
this.$emit('update:test', ++this.test);
}
}
}
}
});
</script>
