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实战》）