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对象及属性
Feb 13 Javascript
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
document.documentElement && document.documentElement.scrollTop
Dec 01 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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分页详细讲解(有实例)
2013/10/30 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
jquery 笔记 事件
2011/11/02 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
详解Vue方法与事件
2017/03/09 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
python自动发送邮件脚本
2018/06/20 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
应届生骨科医生求职信
2013/10/31 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
避暑山庄导游词
2015/02/04 职场文书
大学军训通讯稿
2015/07/18 职场文书
青年联谊会致辞
2015/07/31 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL