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 相关文章推荐
动态改变div的z-index属性的简单实例
Aug 08 Javascript
JavaScript window.location对象
Nov 14 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
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启用zlib压缩文件的配置方法
2013/06/12 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
js常见遍历操作小结
2019/06/06 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python3中bytes和string之间的互相转换
2017/02/09 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
C#怎么让一个窗口居中显示?
2015/10/20 面试题
应聘美工求职信
2013/11/07 职场文书
学期自我评价
2014/01/27 职场文书
代理人委托书
2014/08/01 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
导游词之唐山景点
2019/12/18 职场文书