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 模式设计之工厂模式详细说明
May 10 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
浅析node.js的模块加载机制
May 25 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 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
长波有什么东西
2021/03/01 无线电
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php获取错误信息的方法
2015/07/17 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
跟老齐学Python之复习if语句
2014/10/02 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python多图片合并PDF的方法
2019/01/03 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
解除劳动合同协议书范本
2014/04/14 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
python数字图像处理:图像的绘制
2022/06/28 Python