上一篇文章讲了Vue父子组件之间的通信,这里就介绍一下非父子组件之间是如何通信的。
非父子组件的通信一般有两种方法,一种是通过eventHub,也就是创建一个空的vue对象作为组件间通信的介质;另一种则是通过vuex状态管理。这里介绍的是第一种方法。
先贴上代码:
125 6 73 4 811 12 13 14the count of d is {
{fooCount}} 9 101517 18 19the count of d is {
{barCount}}16
整个原理是比较简单的,总结一下要点:
1.foo组件是通过$emit(name,val)方法将信息发送出去,name表示发送信息的名字,val表示发送的内容
2.然后bar组件里通过$on(name,callback)里获取到foo组件发送的内容,name表示foo组件发送的信息名字,callback表示一个回调函数,来执行获取信息后的一些操作