解决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 28 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
js实现登录与注册界面
Nov 01 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
python Celery定时任务的示例
2018/03/13 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
酒店服务与管理毕业生求职信
2013/11/02 职场文书
生产部经理岗位职责
2013/12/16 职场文书
女子职高个人自荐书
2014/02/01 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
文案策划专业自荐信
2014/07/07 职场文书
园林技术专业求职信
2014/07/28 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
MySQL表字段时间设置默认值
2021/05/13 MySQL
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript