本文共 725 字，大约阅读时间需要 2 分钟。

    在vue的1,0版本里，组件之间的通信是通过$dispatch和$broadcast来进行通信的，但是在2.0版本里面则取消上述这两个方法，并提出了新的解决办法。关于vue2.0的父子组件的通信上文也有讲过，现在要讲的是非父子组件。

    在vue官网中，官方推荐使用eventBus来进行非父子组件的通信，本文现在演示在项目中如何实现非父子组件通信。首先在父组件(App.vue)里，有两个子组件，分别是foo和bar，foo通过$emit方法把信息发送出去，而bar通过$on方法来接收到foo发送的东西，具体演示如下。

首先先新建一个bus.js，里面内容如下：

import Vue from 'vue'export default new Vue();

在父组件中定义后这两个组件：

相应的，foo组件是通过$emit(name,val)方法将信息发送出去，name表示发送信息的名字，val表示发送的内容，导入bus.js：

然后bar组件里通过$on(name,callback)里获取到foo组件发送的内容，name表示foo组件发送的信息名字，callback表示一个回调函数，来执行获取信息后的一些操作，代码如下，导入bus.js：

最后这可以实现兄弟组件通信了。

转载地址：http://wfwoi.baihongyu.com/