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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏圣杰的专栏

IdentityServer4 知多少

现在的应用开发层出不穷,基于浏览器的网页应用,基于微信的公众号、小程序,基于IOS、Android的App,基于Windows系统的桌面应用和UWP应用等等,这...

812
来自专栏Jerry的SAP技术分享

Chrome开发者工具关于网络请求的一个隐藏技能

这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子。

701
来自专栏张善友的专栏

使用 ServiceStack 构建跨平台 Web 服务

本文主要来自MSDN杂志《Building Cross-Platform Web Services with ServiceStack》,Windows Com...

1995
来自专栏程序你好

SignalR介绍简单示例教程入门版

854
来自专栏沃趣科技

等待事件统计视图 | 全方位认识 sys 系统库

在上一篇《内存分配统计视图 | 全方位认识 sys 系统库》中,我们介绍了sys 系统库如何查询内存事件统计信息和buffer pool统计信息,本期的内容先给...

790
来自专栏程序你好

三分钟让你了解什么是Web开发?

573
来自专栏c#开发者

企业库推广

企业库推广  阿新 1. 概述 可重用的程序块库,用于解决共性的企业级开发过程中所面临的挑战 l 较低风险(经过实践验证的、精准的) l 降低成本(可充用) ...

34813
来自专栏ytkah

小程序与小游戏使用wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持

各位小程序开发者注意了:从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。...

5405
来自专栏守候书阁

[杂谈]了解一些额外知识,让前端开发锦上添花

在前端学习里面,很多人都是注重学习代码(html,css,js)。或者是一些框架,库(jquery,vue,react),或者是各种工具(webpack,gul...

603
来自专栏walterlv - 吕毅的博客

在编写异步方法时,使用 ConfigureAwait(false) 避免使用者死锁

发布于 2018-03-23 13:54 更新于 2018-03...

361

扫码关注云+社区