解决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 parseInt 大改造
Sep 27 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
解决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
根德YB400的电路分析
2021/03/02 无线电
PHP 压缩文件夹的类代码
2009/11/05 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
javascript 函数调用规则
2009/08/26 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
js实现简单扫雷
2020/11/27 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
深入理解Python分布式爬虫原理
2017/11/23 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
北承题目(C++)
2012/05/16 面试题
理工科学生的自我评价
2013/12/15 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
青奥会口号
2014/06/12 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
经营场所证明范本
2015/06/19 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
python基础之错误和异常处理
2021/10/24 Python