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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
Angular4.0动画操作实例详解
May 10 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
小偷PHP+Html+缓存
2006/11/25 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
各种快递查询--Api接口
2016/04/26 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
jupyter notebook实现显示行号
2020/04/13 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
毕业生物理教师求职信
2013/10/17 职场文书
促销活动方案模板
2014/02/24 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
经理助理岗位职责
2015/02/02 职场文书
教师工作表现自我评价
2015/03/05 职场文书