vue3+mitt,在页面跳转后，bus.$on能拿到值，但是页面不更新

已于 2024-03-25 14:23:28 修改
阅读量252 收藏
点赞数 2
文章标签： vue.js 前端 javascript
于 2024-03-25 14:22:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_c123c_c/article/details/137012739
版权

vue3+mitt,在页面跳转后，bus.$on能拿到值，但是页面不更新

试过在bus.$ emit页面的onBeforeUnmount中发送，在bus.$on页面onBeforeMount中接收，行不通

试过nextick，试过watch都行不通

c_c123c_c
关注
VUE不同页面间通过Bus传递的值无法渲染到页面
qq_35392084的博客
09-02 1394
VUE不同页面间通过Bus传递的值无法渲染到页面
仿写网易云音乐Demo项目（Vue3+Vite+Vuex+Vue-Router4.0）
weixin_46092744的博客
09-07 1323
vue3.0全家桶（组合式API）vuex➕（持久化数据存储）开发与构建工具Vite（极速的开发服务器启动）坚守前端MVVM的设计理念，遵循组件化、模块化的编程思想这个Demo是自己手把手撸出来的，算是比较粗糙，比如说代码规划还有代码风格可能不太好；功能也不是很全，还有比如Home页面中可以多个类似的组件可以做利用插槽进行代码优化，如果后面有时间的话可能会一点点去完善，毕竟学习不会止步。💪💪。
关于vue中使用事件车(Bus)方式实现兄弟组件通信时$on无法获取数据的问题_同一页面下的bus通信为什么数据不显示
2401_84447362的博客
05-09 522
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue3中跨组件传值(Mitt）
jsbbhx的博客
06-02 297
使用emit传值，使用on接收，最后不要忘记销毁，避免内存泄漏。2.在根目录下创建eventBus.js。3.组件间进行传值与接收值。
vue兄弟组件之间用eventbus传值，传值成功但是页面没有变化
weixin_45926119的博客
04-28 345
EventBus就如同公交车，通过’$emit’让乘客(即所要传递的值)在发出地上车，在目的地通过’$on’使乘客下车。两个组件，A组件和B组件两个不存在任何套嵌关系，通过路由跳转，就会存在一个问题，值传过来了但是页面HTML没有显示。也就是说如果A组件和B组件在同一个页面，通过eventbus传值是好用的，但是如果不是，就会产生问题。新组件：beforeCreate。新组件：beforeMount。B组件（接收数据的组件）新组件：created。新组件：mounted。A组件（要传值的组件）
vue3数据更新页面不更新
m0_70542915的博客
03-14 4075
笔记
vue中兄弟传bus.$on接收值的时候，拿到值，却不渲染页面
weixin_41838734的博客
11-28 5583
兄弟传值的取值是这么写的。 bus.$on('name',funciton(e){ this.name = e }) 发现页面上name的值没有变，是因为this的指向有问题。 所以只要把后边的函数改为箭头函数，即可： bus.$on('name',(e) => { this.name = e }) 这才对！！ ...
Vue数据更新了但是视图不更新
最新发布
m0_61841474的博客
06-20 3068
然而，在某些情况下，Vue可能无法检测到数据的变化，因此不会触发重新渲染，使用。最近在发生了一件很奇怪的事，明明Vue中data的数据已经更新了，但是页面渲染出来的内容并没有跟随着更新，包括使用elemeUI的时候也有这种情况！通过集成各家所讲，本人简单罗列了可能是以下原因导致的，当然，每个人遇到的情况不一样，甚至还会遇到更加邪门的事情，还需要根据自己的实际情况去排查。Vue在更新DOM时是异步执行的。首先在控制台中打印出最后更新的数据，得出的结果是正确的，也就是说在js中并没有存在处理上的问题。
vue 获取到数据但却渲染不到页面上
热门推荐
军火库
06-18 1万+
很多时候对数据进行处理了，但是页面上就是没变化，没效果，用 console.log 打印数据都没问题，特别是数组、对象容易出现这个问题； 保存变量，（向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性） 删除对象的属性，（如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它）强制更新，迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入
解决vue bus.$emit触发第一次$on监听不到问题
10-15
在Vue.js开发中，父子组件通信是一个常见需求。Vue提供了多种方法实现组件间通信，其中Vue...以上知识点是解决bus.$emit触发第一次$on监听不到问题的关键所在，希望本文能对大家在Vue.js开发中遇到类似问题时提供帮助。
Vue中页面跳转文件句柄传递与接收实现方法
资源摘要信息:"在Vue.js框架中实现页面间文件句柄的传递可以采用mitt库来模拟Vue 2中的Event Bus功能，因为Vue 3不再自带Event Bus。mitt是一个小型的发布订阅事件库，适合于组件间通信而不引入庞大的状态管理解决...
vue基础（主要为vue3）
weixin_42823014的博客
04-11 3492
VUE基础入门 vue 简介 Vue 是一套用于构建用户界面的前端框架。 1.1构建用户界面 前端开发者最主要的工作，就是为网站的使用者（又称为：网站的用户）构建出美观、舒适、好用的网页。 1.1构建用户界面的传统方式 在传统的 Web 前端开发中，是基于jQuery + 模板引擎 的方式来构建用户界面的。 1.1.2使用 vue 构建用户界面 使用 vue 构建用户界面，解决了 jQuery + 模板引擎 的诸多痛点，极大的提高了前端开发的效率和体验。 编写结构：基于 vue 中提供的指令，
Vue3与Vue2全方位对比
小陈的博客
08-20 1834
通过以上写法的对比会发现setup语法糖的形式最为便捷而且更符合开发者习惯；未来Vue3的开发应该会大面积使用这种形式。目前Vue3已经成为了Vue的默认版本，后续维护应该也会以Vue3为主；所以还没开始学习Vue3的同学要抓紧了!Vue3文档地址。
VUE组件通信 兄弟传参 EventBus传递的值无法渲染到页面
ka_xi_ou的博客
04-27 606
Event Bus 的实现 以及传值之后无法能接受但是无法渲染的解决方法
解决vue3 mitt路由跳转后 on事件获取不到值的奇葩问题解决
路虽远，行则必至！
09-06 2545
在Vue升级到3.0版本后，prototype属性就被取消了，所以我们不能再使用Vue2中的Vue.prototype.$bus=new Vue()的方式来使用全局事件总线。在Vue3中，推荐使用mitt这一三方库来帮助我们实现全局事件总线。
关于页面没有刷新，bus.$on()被多次绑定的解决办法
如影随风
05-23 993
最近在工作遇到问题，发现bus.$on中的函数被多次触发，查阅资料发现，原来是页面没有刷新导致bus.$on被多次绑定的缘故，解决办法也很简单，就是使用bus.$off解绑，具体示列如下： bus.$emit('eventname','') // 触发 bus.$off('eventname') // 页面没有刷新先解绑 bus.$on('eventname',()=>{ ...
vue3.0项目中，成功获取后端数据，却发现渲染失败，页面还是没数据？
coder184的博客
02-11 1910
因为响应性不存在的情况下，HTML不会检测任何变量&常量的变化，即使它真的变化了，但不会进行检测，仍然使用最开始的值，所以渲染失败，页面没有数据。注：el-tree是element-plus的树形组件，无须过多关注，利用其它组件完成视图部分即可，建议后续再深入。很明显，ref更简洁，同时reactive，对响应性的维持，更加苛刻，需要借助push等函数。解决的办法：赋予响应性即可，使用ref()或者reactive()。渲染失败的原因，是你声明的东西，不具备响应性，或者响应性丢失。
vue-this.$bus.$on-this.$bus.$emit可以在控制台打印出数据但是页面无法读取数据（无法渲染）
qwq2867309085qwq的博客
11-09 890
解决方法：我们需要借助一个暂放空间，在回调函数中将值缓存到这个暂放空间身上在进行调用即可。this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }
兄弟组件传数据:全局事件总线this.$bus.$emit/$on组件跳转过程多次发请求并且页面无法渲染的问题
qq_47530527的博客
03-30 2601
实现业务描述：有A和B两个组件要进行传一个哈希值，A组件获取哈希值后，需要跳转到兄弟组件B组件并且将哈希值传到B组件，具体代码如下图所示： A组件的逻辑 B组件的逻辑 问题描述：A组件中getContent事件只被emit触发了一次，但是B组件this.$Bus.$on中的回调函数却被执行了多次的现象。并且伴随着A组件与B组件跳转过程中回调函数被执行次数会依次增加。 产生原因：this.$Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件即A组件被注销，但.
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值