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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值