叙
最近学了Vue2.0，写写自己的一点总结，关于父子组件通信的，这点对于我来说，是看文档的时候比较难理解的。通过网上找资料和实践，也有一点理解。
例子使用以下代码模板
<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">调用子组件</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>父组件传数据给子组件
当子组件需要父组件传递的数据时，子组件要设置props,来接收父组件传递过去的值。
在这里父组件传递的是total，子组件设置props是[numA,numS]，接着在调用子组件的时候将父组件的数据传递过去，如下
<child :num-a="total" num-s="total"></child>
这样就可以子组件'child'就能接收到父组件（也就是挂载在 app上的）的数据。
关于props的写法有多种，具体请看官方文档
父子通信-动态数据
有时候我们想实现父组件的数据能动态的传递给子组件，使用v-model来实现
<input v-model="total"><child :num-a="total"><!--props的另外一种写法--><scirpt>...
props: {
numA: [String, Number]
}</script>子组件与父组件通信
有时候我们想要实现子组件调用父组件，那要怎么做呢？
我们可以通过触发事件来通知父组件改变数据。
父组件：
<div>
<child @add="incrementTotal" :num-a="total"></child> //监听子组件触发的add事件,然后调用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触发父组件的方法add
}
}
}
}子组件执行add方法 => 触发$emit => 触发父组件add方法 => 执行 incrementTotal 方法 => 完成
父组件调用子组件
通过给子组件设置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 //改变子组件的数据
childRef.add(11) //调用子组件的方法
}
}, 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个组件不是父子组件那么如何通信呢？
这时可以通过eventHub来实现通信，
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。（或者使用vuex）
简单代码如下
new Vue({ el: '#app', data: { eventHub: new Vue()
}
})然后通过this.$root.eventHub获取，下面代码简写为eventHub
组件1触发：
<div @click="eve"></div>methods: {
eve() {
eventHub.$emit('change', params); //eventHub触发事件
}
}组件2接收：
<div></div>created() {
eventHub.$on('change', (params) => { //eventHub接收事件
});
}这样就实现了非父子组件之间的通信了，原理就是把Hub当作一个中转站！
总结
例子代码：JSFiddle
参考：vue2.0父子组件以及非父子组件如何通信
作者：平凡数
链接：https://www.jianshu.com/p/eb988d13333a
随时随地看视频
