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 相关文章推荐
jquery表单验证使用插件formValidator
Nov 10 Javascript
js取得url地址参数实例
Feb 22 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
理解javascript中的with关键字
Feb 15 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
jquery实现图片轮播器
May 23 jQuery
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php include类文件超时问题处理
2015/02/06 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
python遍历数组的方法小结
2015/04/30 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
举例讲解Python常用模块
2019/03/08 Python
python字典改变value值方法总结
2019/06/21 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
违反学校规定检讨书
2014/01/18 职场文书
美德好少年主要事迹
2014/01/29 职场文书
食品采购员岗位职责
2014/04/14 职场文书
车辆年审委托书范本
2014/09/18 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
消防安全主题班会
2015/08/12 职场文书