解决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 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 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
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
keras多显卡训练方式
2020/06/10 Python
python绘制分布折线图的示例
2020/09/24 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
优秀研究生自我鉴定
2013/12/04 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
党员承诺书范文
2014/05/19 职场文书
授权委托书
2014/07/31 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
兴趣班停课通知
2015/04/24 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS