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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
js同源策略详解
May 21 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 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+SqlServer实现分页显示
2006/10/09 PHP
php强制下载类型的实现代码
2011/04/21 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
DOM精简教程
2006/10/03 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python数据结构之链表详解
2017/09/12 Python
python如何使用unittest测试接口
2018/04/04 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
中专毕业生自荐信
2013/11/16 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android