vue中eventbus被多次触发以及踩过的坑


Posted in Javascript onDecember 02, 2017

一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B。(我知道,小参数的时候可以通过路由的params或者query去传参数,或者大型数据可以用vuex来处理,很遗憾我到现在还没有做很大型的项目,所以还没有用过vuex,接下来会学习一下。)

然后我就想,这不就是不同组件之间的数据传递问题而已吗?直接用bus 巴士事件来传递数据不就行了吗。于是,我就很愉快地进行了。关于vue中的eventbus的使用,我之前在一篇vue中的数据传递中有提到过。

先给你们看一下我一开始的代码:

实现目标:

点击之后,bus emit事件,然后顺便跳转路由到/moneyRecord页面。

接下来就是在MoneyRecord页面中去on接收这个事件,然后接受参数。

// 这是页面A的内部触发bus事件的代码
 editList (index, date, item) {
// 点击进入编辑的页面,需要传递的参数比较多。
  console.log(index, date, item)
  bus.$emit('get', {
  item: item.type,
  date: date
  })
  this.$router.replace({path: '/moneyRecord'})
 }

// moneyRecord页面
created () {
 //这里我将icon的list给保存下来了
 bus.$on('get', this.myhandle)
 },
methods: {
 myhandle (val) {
  console.log(val, '这是从上个页面传递过来的参数')
 }
}

就当我欣喜若狂的时候,觉得自己只要在页面A触发了get事件,页面B中就会理所当然的接受了数据。然而,结果却不如人意,看一下下面的动图。

主要是看“”这是从上个页面传来的数据这一行数据的输出次数情况来判断事件触发次数。“”

vue中eventbus被多次触发以及踩过的坑

不知道你有没有发现,就是我第一次进去list页面的时候,我随便点击一下list下的任何一个item,控制台没有输出。但是当我第二次再点击触发事件的时候,就会输出一个测试数据。再一次进去点击,就输出两个数据。。。依次增加了。(控制台上那个“这是从上个页面传来的数据”就是测试数据)

所以,有两个问题。

问题:

  1. 问题1: 为什么第一次触发的时候页面B中的on事件没有被触发
  2. 问题2: 为什么后面再一次依次去触发的时候会出现,每一次都会发现好像之前的on事件分发都没有被撤销一样,导致每一次的事件触发执行越来越多。

解决

针对问题1

这个还得从vue的生命周期说起了,我先进行了测试,就是当从页面组件A跳转到页面组件B的时候,两个组件的生命周期分别是怎么样的,关于vue的生命周期具体每一个时期做什么事情我就不再赘述了,下面po一张vue生命周期的图。

vue中eventbus被多次触发以及踩过的坑

我自己做了实验来验证,这个页面跳转过程中,这两个组件的生命周期的执行情况。

// 我分别在页面A和页面B中去添加以下代码:
beforeCreate () {
 console.group('%c%s', 'color:red', 'beforeCreate 创建前状态===============组件2》')
 },
 created () {
 console.group('%c%s', 'color:red', 'created 创建完毕状态===============组件2》')
 },
 beforeMount () {
 console.group('%c%s', 'color:red', 'beforeMount 挂载前状态===============组件2》')
 },
 mounted () {
 console.group('%c%s', 'color:red', 'mounted 挂载状态===============组件2》')
 },
 beforeUpdate () {
 console.group('%c%s', 'color:red', 'beforeUpdate 更新前状态===============组件2》')
 },
 updated () {
 console.group('%c%s', 'color:red', 'updated 更新状态===============组件2》')
 },
 beforeDestroy () {
 console.group('%c%s', 'color:red', 'beforeDestroy 破前状态===============组件2》')
 },
 destroyed () {
 console.group('%c%s', 'color:red', 'destroyed 破坏状态===============组件2》')
 }
// 另外一个组件的我就不放出来了

测试结果图:

vue中eventbus被多次触发以及踩过的坑

vue中eventbus被多次触发以及踩过的坑

其实,可以通过结果清楚看到,当我们还在页面A的时候,页面B还没生成,也就是页面B中的 created中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit事件的时候,B其实是没有监听到的。

再看一下,红色的是B页面组件,当你从页面A到页面B跳转的时候,发生了什么?首先是先B组件先created然后beforeMount接着A组件才被销毁,A组件才执行beforeDestory,以及destoryed.

所以,我们可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候,B页面组件已经被created了,也就是我们写的$on事件已经触发了

所以可以,在beforeDestory的时候,$emit事件。

// 修改一下A页面中的代码:
// 这是原先的代码
 editList (index, date, item) {
// 点击进入编辑的页面,需要传递的参数比较多。
  console.log(index, date, item)
  this.item = item.type
  this.date = date
  this.$router.replace({path: '/moneyRecord'})
 }
// 重新在data属性内部定义新的变量,来存储要传过去的数据;
然后:
 beforeDestroy () {
 console.log(this.highlight, '这是今年的数据', this, '看看组件销毁之前会发生什么')
 bus.$emit('get', {
  item: this.item,
  date: this.date
  })
 },

接下来。看一下修改之后的效果

vue中eventbus被多次触发以及踩过的坑

可以看到,就是第一次点击list的时候,也就是第一次触发emit事件的时候,控制太就输出了,所以在beforeDestoryed去$emit是起到作用的,B页面组件也监听$on到了。

但是,好像,就是事件的触发还是会依次增加,就是控制台的输出每次都有所增加了。。。

解决:

看一下github上提出的。https://github.com/vuejs/vue/issues/3399

vue中eventbus被多次触发以及踩过的坑

尤大大提出了以下解决:

vue中eventbus被多次触发以及踩过的坑

*就是说,这个$on事件是不会自动清楚销毁的,需要我们手动来销毁。(不过我不太清楚这里的external bus 是什么意思,有大神能解答一下的吗,尤大大也提到如果是注册的是external bus 的时候需要清除)****

所以。我在B组件页面中添加Bus.$off来关闭。代码如下:

// 在B组件页面中添加以下语句,在组件beforeDestory的时候销毁。
 beforeDestroy () {
 bus.$off('get', this.myhandle)
 },

来看一下输出的结果

vue中eventbus被多次触发以及踩过的坑

t可以看到,控制台第一次进去的时候就有输出,而且输出的不会逐次增加

*当然,尤大大还说可以写一个mixin?我还不知道是什么?以后在研究一下。

总结: 所以,如果想要用bus 来进行页面组件之间的数据传递,需要注意亮点,组件A$emit事件应在beforeDestory生命周期内。其次,组件B内的$on记得要销毁。

提问时间:你们在实现页面组件之间的数据传递有什么好的方法吗?可以留言分享一下吗?有时候虽然也可以通过从后台获取,但是考虑到数据只有几个需要传的话,就没有必要去请求数据,我知道有的还有用vueX传递。还有呢?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
JavaScript中0和""比较引发的问题
May 26 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
Angular之toDoList的实现代码示例
Dec 02 #Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 #Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 #Javascript
Vue按需加载的具体实现
Dec 02 #Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 #Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
如何让你的JS代码更好看易读
Dec 01 #Javascript
You might like
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
js实现交通灯效果
2017/01/13 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python抽象类的新写法
2015/06/18 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
介绍一下mysql的日期和时间函数
2013/03/28 面试题
老公给老婆的道歉信
2014/01/10 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
企业整改报告范文
2014/11/08 职场文书
人事文员岗位职责
2015/02/04 职场文书
电信营业员岗位职责
2015/04/14 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers