解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题


Posted in Javascript onJuly 28, 2020

bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据。检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!!

我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据。因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码:

//页面1
 beforeCreate () {
  console.group('%c%s', 'color:red', 'beforeCreate 创建前状态===============组件1》')
 },
 created () {
  console.group('%c%s', 'color:red', 'created 创建完毕状态===============组件1》')
 },
 beforeMount () {
  console.group('%c%s', 'color:red', 'beforeMount 挂载前状态===============组件1》')
 },
 mounted () {
  console.group('%c%s', 'color:red', 'mounted 挂载状态===============组件1》')
 },
 beforeUpdate () {
  console.group('%c%s', 'color:red', 'beforeUpdate 更新前状态===============组件1》')
 },
 updated () {
  console.group('%c%s', 'color:red', 'updated 更新状态===============组件1》')
 },
 beforeDestroy () {
  console.group('%c%s', 'color:red', 'beforeDestroy 破前状态===============组件1》')
 },
 destroyed () {
  console.group('%c%s', 'color:red', 'destroyed 破坏状态===============组件1》')
 }

当从页面1跳转到页面2的时候,控制台的打印情况如下:

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

从上图便可以发现,bus第一次使用无法传递的原因:

在页面1通过$emit方法传递数据然后跳转路由的时候,其实页面2的$on监听还没有建立,因此无法得到数据!

基于上述原因,提出的解决办法如下:

在页面1的beforeDestroy或者destroyed钩子函数中emit数据,在页面2的beforeCreate、created或者beforeMount钩子函数中建立$on监听事件,然后在页面2的mounted钩子函数中$on得到的数据赋值给页面2的变量中。

//页面1
 beforeDestroy () {
  bus.$emit('dataFromBus1',this.dataFromBus1);
 },
 //页面2
  beforeCreate () {
  bus.$on('dataFromBus1',function(url){
   bus.dataFromBus1 = url
  });  
 }, 
 mounted () {
  this.dataFromBus1 = bus.dataFromBus1;  
 },

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

可以发现,第一次跳转的时候页面2就能够得到传递的数据!!!

这个坑应该是使用bus必须会 踩到的,希望下次使用的时候能够留个心眼!!!

补充知识:vue非父子组件传值(bus)遇到的坑

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

控制台可以打印出传递过来的值,但就是不会渲染到页面上那么重点来了!!!

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

在A销毁之前,B组件的beforeCreate ,created,和beforeMount这三个钩子函数先触发,之后才是A组件的销毁钩子的触发,因为总线Bus要求要先有监听在触发,才能成功监听,所以我们只能在A组件的beforeDestroy或者destroyed这两个生命周期钩子中触发函数emit,同理也只能在B组中的beforeCreate,created,和beforeMount这三个钩子函数中监听 emit,同理也只能在B组中的beforeCreate ,created,和beforeMount这三个钩子函数中监听emit,同理也只能在B组中的beforeCreate,created,和beforeMount这三个钩子函数中监听on。

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

页面渲染的值如下图所示

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

还是有之前重复触发的问题,还是会随着切换次数的增加而使监听函数触发的次数增加,解决这个问题就简单了。在我们用总线传值的时候要记得关闭监听,在B组件中的destroyed钩子中增加EventBus.$off方法即可,至此就没问题了。

以上这篇解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
jquery异步调用页面后台方法‏(asp.net)
Mar 01 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 #Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 #Javascript
vue实现虚拟列表功能的代码
Jul 28 #Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 #Javascript
Vue2.0 $set()的正确使用详解
Jul 28 #Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 #Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 #Javascript
You might like
ftp类(myftp.php)
2006/10/09 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
Javascript 实用小技巧
2010/04/07 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
拓展训练激励口号
2014/06/17 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
政府会议通知范文
2015/04/15 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
python自动化测试之Selenium详解
2022/03/13 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技