vue采用EventBus实现跨组件通信及注意事项小结


Posted in Javascript onJune 14, 2018

EventBus

EventBus是一种发布/订阅事件设计模式的实践。

在vue中适用于跨组件简单通信,不适应用于复杂场景多组件高频率通信,类似购物车等场景状态管理建议采用vuex。

vue采用EventBus实现跨组件通信及注意事项小结

挂载EventBus到vue.prototype

添加bus.js文件

//src/service/bus.js
export default (Vue) => {
 const eventHub = new Vue()
 Vue.prototype.$bus = {
 /**
  * @param {any} event 第一个参数是事件对象,第二个参数是接收到消息信息,可以是任意类型
  * @method $on 事件订阅, 监听当前实例上的自定义事件。https://cn.vuejs.org/v2/api/#vm-on
  * @method $off 取消事件订阅,移除自定义事件监听器。 https://cn.vuejs.org/v2/api/#vm-off https://github.com/vuejs/vue/issues/3399
  * @method $emit 事件广播, 触发当前实例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
  * @method $once 事件订阅, 监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。 https://cn.vuejs.org/v2/api/#vm-once
  */
  $on (...event) {
   eventHub.$on(...event)
  },
  $off (...event) {
   eventHub.$off(...event)
  },
  $once (...event) {
   eventHub.$emit(...event)
  },
  $emit (...event) {
   eventHub.$emit(...event)
  }
 }
}
注册
//main.js
import BUS from './service/bus'
BUS(Vue)

注意事项

  1. 事件订阅必须在事件广播前注册;
  2. 取消事件订阅必须跟事件订阅成对出现。

使用场景

1.跨路由组件使用eventbus通信

假设a路由跳转b路由需要通过eventbus通信,先观察路由跳转前后a,b组件的生命周期钩子函数,可以发现两者是交叉执行的。

由于事件订阅必须在事件广播前注册,所以事件订阅可以放在b组件beforeCreate,created,beforeMout钩子函数中,而事件广播可以放在a组件的beforeDestroy,destroyed中。

取消事件订阅必须跟事件订阅成对出现,否则会重复订阅,对javascript性能造成不必要的浪费。因此B组件销毁前需取消当前事件订阅。

vue采用EventBus实现跨组件通信及注意事项小结

A组件

beforeDestroy () {
  //事件广播
   this.$bus.$emit('testing', color)
  }

B组件

created () {
  //事件订阅
   this.$bus.$on('testing', (res) => { console.log(res) })
  },
  beforeDestroy () {
   this.$bus.$off('testing')
  }

2.普通跨组件通信:由于两组件几乎同时加载,因此建议事件广播放在created钩子内,事件订阅放在mouted中即可。具体使用场景建议在两组件分别打印生命钩子函数进行准确判断。

beforeCreate: function () {
  console.group('A组件 beforeCreate 创建前状态===============》')
 },
 created: function () {
  console.group('A组件 created 创建完毕状态===============》')
 },
 beforeMount: function () {
  console.group('x组件 beforeMount 挂载前状态===============》')
 },
 mounted: function () {
  console.group('x组件 mounted 挂载结束状态===============》')
 },
 beforeUpdate: function () {
  console.group('x组件 beforeUpdate 更新前状态===============》')
 },
 updated: function () {
  console.group('x组件 updated 更新完成状态===============》')
 },
 beforeDestroy: function () {
  console.group('x组件 beforeDestroy 销毁前状态===============》')
 },
 destroyed: function () {
  console.group('x组件 destroyed 销毁完成状态===============》')
 }

总结

以上所述是小编给大家介绍的vue采用EventBus实现跨组件通信及注意事项小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js网页实时倒计时精确到秒级
Feb 10 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 #Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 #Javascript
vue中如何让子组件修改父组件数据
Jun 14 #Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 #Javascript
MVVM框架下实现分页功能示例
Jun 14 #Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
React 组件间的通信示例
Jun 14 #Javascript
You might like
PHP 递归效率分析
2009/11/24 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
srcElement表格样式
2006/09/03 Javascript
学习ExtJS form布局
2009/10/08 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python实现上传下载文件功能
2020/11/19 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
python Tkinter的图片刷新实例
2019/06/14 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
设计部经理的岗位职责
2013/11/16 职场文书
门卫班长岗位职责
2013/12/15 职场文书
八年级音乐教学反思
2014/01/09 职场文书
简历里的自我评价
2014/01/31 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
5.12护士节活动总结
2015/02/10 职场文书
个人总结怎么写
2015/02/26 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书