敘
最近學(xué)了Vue2.0，寫寫自己的一點(diǎn)總結(jié)，關(guān)于父子組件通信的妓忍，這點(diǎn)對于我來說虏两，是看文檔的時(shí)候比較難理解的。通過網(wǎng)上找資料和實(shí)踐世剖，也有一點(diǎn)理解定罢。
例子使用以下代碼模板
<script src="https://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<div id="app">
<!--父組件-->
<p>{{total}}</p>
<child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>
<button type="button" @click="clickref">調(diào)用子組件</button>
</div>
<!--子組件-->
<template id="myChild">
<button @click="add">{{counter}}</button>
</template>
<script>
new Vue({
el:'#app',
data :{
total: 1
},
methods:{
incrementTotal : function(){
},
clickref:function(){
}
},
components:{
'child' :{
template:'#myChild',
data : function(){
return{
counter : 0
}
},
props:['numA','numS'],
methods:{
add : function(){
}
}
}
}
});
</script>
父組件傳數(shù)據(jù)給子組件
當(dāng)子組件需要父組件傳遞的數(shù)據(jù)時(shí)，子組件要設(shè)置props,來接收父組件傳遞過去的值旁瘫。
在這里父組件傳遞的是total祖凫，子組件設(shè)置props是[numA,numS]，接著在調(diào)用子組件的時(shí)候?qū)⒏附M件的數(shù)據(jù)傳遞過去酬凳，如下
<child :num-a="total" num-s="total"></child>
這樣就可以子組件'child'就能接收到父組件（也就是掛載在 app上的）的數(shù)據(jù)惠况。
關(guān)于props的寫法有多種，具體請看官方文檔
父子通信-動(dòng)態(tài)數(shù)據(jù)
有時(shí)候我們想實(shí)現(xiàn)父組件的數(shù)據(jù)能動(dòng)態(tài)的傳遞給子組件宁仔，使用v-model來實(shí)現(xiàn)
<input v-model="total">
<child :num-a="total">
<!--props的另外一種寫法-->
<scirpt>
...
props: {
numA: [String, Number]
}
</script>
子組件與父組件通信
有時(shí)候我們想要實(shí)現(xiàn)子組件調(diào)用父組件稠屠，那要怎么做呢？
我們可以通過觸發(fā)事件來通知父組件改變數(shù)據(jù)翎苫。
父組件：
<div>
<child @add="incrementTotal" :num-a="total"></child> //監(jiān)聽子組件觸發(fā)的add事件,然后調(diào)用incrementTotal方法
</div>
methods: {
incrementTotal() {
this.total +=1
}
}
子組件：
components:{
'child' :{
template:'#myChild',
data : function(){
return{
counter : 0
}
},
props:['numA','numS'],
methods:{
add : function(){
this.counter +=1
this.$emit('add') //子組件通過 $emit觸發(fā)父組件的方法add
}
}
}
}
子組件執(zhí)行add方法 => 觸發(fā)$emit => 觸發(fā)父組件add方法 => 執(zhí)行 incrementTotal 方法 => 完成
父組件調(diào)用子組件
通過給子組件設(shè)置ref完箩，可以很方便的獲取到子組件，然后改變子組件拉队。
<child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>
new Vue({
el:'#app',
data :{
total: 0
},
methods:{
incrementTotal : function(){
this.total += 1
},
clickref:function(){
let childRef = this.$refs.childTest //獲取子組件
childRef.counter = 1221 //改變子組件的數(shù)據(jù)
childRef.add(11) //調(diào)用子組件的方法
}
},
components:{
'child' :{
template:'#myChild',
data : function(){
return{
counter : 0
}
},
props:['numA','numS'],
methods:{
add : function(num){
this.counter +=1
this.$emit('add')
console.log('接收父組件的值'：+ num)
}
}
}
}
});
子組件與子組件通信
如果2個(gè)組件不是父子組件那么如何通信呢弊知？
這時(shí)可以通過eventHub來實(shí)現(xiàn)通信，
所謂eventHub就是創(chuàng)建一個(gè)事件中心粱快，相當(dāng)于中轉(zhuǎn)站秩彤，可以用它來傳遞事件和接收事件。（或者使用vuex）
簡單代碼如下
new Vue({
el: '#app',
data: {
eventHub: new Vue()
}
})
然后通過this.$root.eventHub獲取事哭，下面代碼簡寫為eventHub
組件1觸發(fā)：
<div @click="eve"></div>
methods: {
eve() {
eventHub.$emit('change', params); //eventHub觸發(fā)事件
}
}
組件2接收：
<div></div>
created() {
eventHub.$on('change', (params) => { //eventHub接收事件
});
}
這樣就實(shí)現(xiàn)了非父子組件之間的通信了漫雷，原理就是把Hub當(dāng)作一個(gè)中轉(zhuǎn)站！
總結(jié)
例子代碼：JSFiddle
參考：vue2.0父子組件以及非父子組件如何通信
