eventBus和$route.push.query同时用解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题

简介: eventBus和$route.push.query同时用解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题

eventBus和$route.push.query同时使用,解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题

将近两天高强度加班,我居然发现了这个,eventBus和$route.push.query同时使用,居然可以解决eventBus刷新数据就消失不持久的问题。

这个可以很好解决跨组件或者跨文件实现组件通信的问题

有人会说,你怎么不用vuex呢?vuex持久化也很麻烦,得封装持久化组件,最主要的就是,我这个项目只能用cookies,不能使用localStorage和sessionStorage,跨n个文件组件,那4kb的空间用完怎么办?还那么麻烦。

直接上代码

MenuTree.vue

// eventBus传递一次
this.$eventBus.$emit('typeId', item._id) 
this.$eventBus.$emit('lineBus', item.kf_online) 
this.$eventBus.$emit('versionBus', item.version) 
// 路由参数传递一次
this.$router.push({
 path:`/knowledge/${item.type}`,
 query:{
     typeId: item._id,
     online: item.kf_online,
     version: item.version,
     }
})

跨n个文件组件的content.vue

<span :title="title">{{kfVersion}}</span>
data() {
    return {
      types: this.$route.query.typeId,     // 将路由的数据保存到data
      kfVersion:  this.$route.query.version,
      kfLine: this.$route.query.online,
    };
  },
//  这个时候有人会说,这不就拿到数据了吗,bus完全冗余,没啥作用
//  开始我也这么认为的,后来我哭了,跨n个文件n个组件,$route.push.query拿动态数据的时候,它不变,就是watch监听也监听不到,undefind还是什么,我忘记了,这就是难受的地方,猜测估计是那个组件销毁了,所以拿不到。
 created(){    
    this.$eventBus.$on('typeId',(id)=>{        // 拿eventbus传过来的数据,放在data里
      this.types = id
    })
    this.$eventBus.$on('lineBus',(id)=>{
      this.kfLine = id
    })
    this.$eventBus.$on('versionBus',(id)=>{
      this.kfVersion = id
    })
  },
可以做个实验:
1、注调eventbus的接收,MenuTree.vue中改变version,kfVersion是并不会变化的,取消注释就好了。
2、把data里的 kfVersion:  this.$route.query.version,换成 kfVersion: "", 这个时候kfVersion的值就来自于eventbus了,刚加载,dom那里显示空。MenuTree.vue中改变version,然后正常跟着变化。但是一刷新数据就没了。
// 现在data里的数据就可以使用了,刷新不会消失
// 如果没有eventbus,MenuTree.vue里typeId、online、version变化,content.vue里拿到的这几个数据不会变化,可以说eventbus,解决了跨n文件n组件引起的$route.push.query不变的问题,$route.push.query解决了刷新页面,eventbus数据就没的问题。

可以做个实验:

1、注调eventbus的接收,MenuTree.vue中改变version,kfVersion是并不会变化的,取消注释就好了。

2、把data里的 kfVersion: this.$route.query.version,换成 kfVersion: “”, 这个时候kfVersion的值就来自于eventbus了,刚加载,dom那里显示空。MenuTree.vue中改变version,然后正常跟着变化。但是一刷新数据就没了。

结论

1、现在data里的数据就可以使用了,刷新不会消失

2、如果没有eventbus,MenuTree.vue里typeId、online、version变化,content.vue里拿到的这几个数据不会变化,可以说eventbus,解决了跨n文件n组件引起的r o u t e . p u s h . q u e r y 不 变 的 问 题 , route.push.query不变的问题,route.push.queryroute.push.query解决了刷新页面,eventbus数据就没的问题。

.

.

.

.

.

.

能力有限,有很多地方可能有误,大佬们如果知道,欢迎留言。
目录
相关文章
|
4月前
|
JavaScript
成功解决:如何通过this.$router.push(“/Login“)的方式传参,在另外一个页面接收数据的问题
这篇文章介绍了如何在Vue框架中通过路由跳转传递参数,并在另一个页面接收这些参数。具体方法是使用`this.$router.push`方法的`params`属性传递对象,然后在目标页面通过`this.$route.params`接收传递的参数。
成功解决:如何通过this.$router.push(“/Login“)的方式传参,在另外一个页面接收数据的问题
|
2月前
|
缓存 移动开发 JavaScript
《vue2进阶篇:路由》第10章:vue-router,包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件
《vue2进阶篇:路由》第10章:vue-router,包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件
55 2
|
5月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
46 0
|
7月前
|
JavaScript
vue中watch监听路由传来的参数变化问题
vue中watch监听路由传来的参数变化问题
137 0
|
7月前
|
JavaScript 前端开发
【vue】跨路由传值,params和query有什么区别?
【vue】跨路由传值,params和query有什么区别?
72 0
|
7月前
|
JavaScript
vue中router页面之间参数传递,params失效,建议使用query
vue中router页面之间参数传递,params失效,建议使用query
435 0
|
7月前
|
JavaScript
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
|
JavaScript
state 和 props 触发更新的生命周期分别有什么区别?
state 和 props 触发更新的生命周期分别有什么区别?
|
7月前
|
负载均衡 JavaScript 网络协议
route和router的区别,怎么定义vue-router的动态路由?怎么获取传过来的值
route和router的区别,怎么定义vue-router的动态路由?怎么获取传过来的值
99 1
|
7月前
|
JavaScript
Vue中子组件单个双向绑定发送事件使用input,多个使用 update:变量名;父组件接收时,v-model 接收单个,.sync 接收多个(vue3中使用v-model:name的写法)
Vue中子组件单个双向绑定发送事件使用input,多个使用 update:变量名;父组件接收时,v-model 接收单个,.sync 接收多个(vue3中使用v-model:name的写法)
下一篇
DataWorks