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 相关文章推荐
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 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 expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python画图高斯分布的示例
2019/07/10 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
先进工作者获奖感言
2014/02/08 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
开除员工通知
2015/04/22 职场文书
大学生支教感言
2015/08/01 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
Python 数据可视化之Matplotlib详解
2021/11/02 Python