解决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 相关文章推荐
前台js调用后台方法示例
Dec 02 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
简单实现JS计算器功能
Dec 21 Javascript
js 作用域和变量详解
Feb 16 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
node中koa中间件机制详解
Aug 22 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 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 学习资料零碎东西
2010/12/04 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
python每次处理固定个数的字符的方法总结
2013/01/29 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python入门篇之字符串
2014/10/17 Python
Python实现一个简单的验证码程序
2017/11/03 Python
Python语言描述随机梯度下降法
2018/01/04 Python
在Django中实现添加user到group并查看
2019/11/18 Python
django中的数据库迁移的实现
2020/03/16 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
元旦红领巾广播稿
2014/02/19 职场文书
高三毕业寄语
2014/04/10 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
个人职业及收入证明
2014/10/13 职场文书
学习普通话的体会
2014/11/07 职场文书
2014年生产部工作总结
2014/12/17 职场文书
监理中标通知书
2015/04/16 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
Python基础之Socket通信原理
2021/04/22 Python
利用Pycharm连接服务器的全过程记录
2021/07/01 Python