導(dǎo)讀 ：
Vue中：
1.父組件向子組件傳值：通過給子組件傳遞屬性，子組件通過props接收父組件的值再加以使用。
2.子組件向父組件傳值：通過this.$emit([自定義方法名],[傳遞的參數(shù)1],……)執(zhí)行自定義方法來傳值給父組件轧膘，父組件在方法中接收。
例子：
- 這是一個通過父子組件傳值來求和的一個例子，每個子組件點擊都會加2攒岛，父組件計算2個子組件和。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!--父組件傳值給子組件通過在子組件中定義屬性如下(:count="0")-->
<!--子組件傳值給父組件通過執(zhí)行自定義方法-->
<counter :count="0" @inc='clickChange'></counter>
<counter :count="1" @inc='clickChange'></counter>
<div>{{total}}</div>
</div>
<script>
// 通過父組件傳值給子組件胞锰，如果子組件要改變值則會產(chǎn)生警告灾锯，故采用復(fù)制父組件值的方法
var counter = {
props: ['count'],
data: function() {
return {
number: this.count
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function() {
// console.log(this.number);
this.number = this.number + 2;
// 給父組件傳值
this.$emit('inc', 2);
}
}
};
// 父組件通過屬性向子組件傳值，
var vm = new Vue({
el: '#root',
components: {
counter: counter
},
data: {
total: 1
},
methods: {
// 要定義形參來表示接收的值
clickChange: function(step) {
this.total += step;
}
}
})
</script>
</body>
</html>
總結(jié) ：
- 實際Vue實例也是個組件嗅榕，我們一般稱它為根組件顺饮，若定義局部組件則需要在根組件中聲明，如果是全局組件則不需凌那。
- 子組件通過父組件傳值的方式拿到的值不可直接進(jìn)行變更兼雄，否則報錯（實際是警告）。結(jié)局辦法：子組件中復(fù)制父組件的值再使用子組件的值即可帽蝶。
