Vue组件通信之Bus的具体使用


Posted in Javascript onDecember 28, 2017

关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里。

在vue2.0中 $dispatch 和 $broadcast 已经被弃用。官方文档中给出的解释是:

因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。

官方推荐的状态管理方案是 Vuex。不过如果项目不是很大,状态管理也没有很复杂的话,使用 Vuex 有种杀鸡用牛刀的感觉,当然,这也是要根据自己的需求来的,只是建议。

vue官方文档中有这样一个定义:非父子组件的通信,内容很少,如下:

Vue组件通信之Bus的具体使用

其实关于这个非父子组件通信的demo还是有的,它藏在了$dispatch 和 $broadcast的迁移文档中,有兴趣的小伙伴可以点击进去查看。文档中的建议就是:

对于$dispatch 和 $broadcast最简单的升级方式就是:通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的。
这个集中式的事件中间件就是 Bus。我习惯将bus定义到全局:

app.js

var eventBus = {
 install(Vue,options) {
  Vue.prototype.$bus = vue
 }
};
Vue.use(eventBus);

然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:

分发事件的组件

// ...
methods: {
 todo: function () {
 this.$bus.$emit('todoSth', params); //params是传递的参数
 //...
 }
}

监听的组件

// ...
created() {
 this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作
  //todo something
 })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('todoSth');
},

如果需要监听多个组件,只需要更改 bus 的 eventName:

// ...
created() {
 this.$bus.$on('firstTodo', this.firstTodo);
 this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('firstTodo', this.firstTodo);
 this.$bus.$off('secondTodo', this.secondTodo);
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
JS实现轮播图效果
Jan 11 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 #Javascript
Swiper自定义分页器使用详解
Dec 28 #Javascript
swiper自定义分页器使用方法详解
Sep 14 #Javascript
JavaScript实现数值自动增加动画
Dec 28 #Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 #Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 #Javascript
JS实现带动画的回到顶部效果
Dec 28 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
python字典基本操作实例分析
2015/07/11 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python处理session的方法整理
2019/08/29 Python
python求绝对值的三种方法小结
2019/12/04 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
幼教个人求职信范文
2013/12/02 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
节水口号标语
2014/06/19 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
结婚堵门保证书
2015/05/08 职场文书
单位接收证明格式
2015/06/18 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
Java spring定时任务详解
2021/10/05 Java/Android
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server