vue - 组件间通信 之 中央事件总线bus

中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容；

var bus = new Vue();

人如其名，她就像一个公交车一样，来回输送人，将a站点的A输送到b站点，再将b站点的B输送到a站点；

这里a，b站点就像父、子组件，也像兄、弟组件，或者像两个没有任何亲戚关系的任何组件；

而A,B就像是各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。

 

如果有父子组件通信知识基础的，应该记得当初父子组件通信，父组件中用$on监听,子组件中用$emit发射。

现如今父子组件(或任何其他关系的两个组件之间)达成一致协议：

将监听和发射的工作交给了bus来搞，就好像他们两头不自驾接送了，改乘公交了自己出发自己回家了。

那局面就是下边这样

$on和$emit现在绑在bus上了

bus.$emit(‘同名自定义事件名’，‘$on发送过来的数据’)；

在a站点（第一个组件）中的methods方法里，准备用bus的$emit发射事件任务。

1 bus.$on(‘自定义事件名’，function(){
2     //然后执行什么你自己懂的。。。
3 })；

在b站点（另一个组件）实例初始化（mounted钩子中）时，用bus的$on监听自家$emit触发的事件。

 

 

Bus实例扩展：

可以再添加data、methods、computed等选项，在初始化时让bus获取一下，任何组件都可以公用了。就像公交车上的座位，只要有座谁都能坐。

可以包括一些共享通用的信息：比如用户登录的姓名、性别、邮箱等，还有油壶授权的token等。（梁灏《vueJs实战》）