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 相关文章推荐
js中eval详解
Mar 30 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
jQuery拖拽 & 弹出层 介绍与示例
Dec 27 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python函数参数操作详解
2018/08/03 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
对Django中内置的User模型实例详解
2019/08/16 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
新闻网站实习自我鉴定
2013/09/25 职场文书
智能电子应届生求职信
2013/11/10 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
小学中等生评语
2014/12/29 职场文书
会议主持人开场白台词
2015/05/28 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB