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

原创 已于 2024-03-25 14:23:28 修改 · 401 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2024-03-25 14:22:38 首次发布
文章讲述了在使用Vue3和mitt库时，遇到的问题：即使在onBeforeUnmount中emit值，在onBeforeMount中接收到，但页面内容并未更新。尝试了nextick和watch方法均未解决问题。

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

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

试过nextick，试过watch都行不通

c_c123c_c
关注
解决vue bus.$emit触发第一次$on监听不到问题
10-15
在Vue.js开发中，父子组件通信是一个常见需求。Vue提供了多种方法实现组件间通信，其中Vue...以上知识点是解决bus.$emit触发第一次$on监听不到问题的关键所在，希望本文能对大家在Vue.js开发中遇到类似问题时提供帮助。
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
在Vue.js应用中，我们有时会使用自定义事件总线（bus）来实现非父子组件间的通信，特别是在不涉及路由的场景下。然而，当在路由跳转过程中使用bus进行数据传递时，可能会遇到首次跳转时数据未能成功传递的问题。这个...
VUE不同页面间通过Bus传递的值无法渲染到页面
qq_35392084的博客
09-02 1519
VUE不同页面间通过Bus传递的值无法渲染到页面
vue兄弟组件之间用eventbus传值，传值成功但是页面没有变化
weixin_45926119的博客
04-28 485
EventBus就如同公交车，通过’$emit’让乘客(即所要传递的值)在发出地上车，在目的地通过’$on’使乘客下车。两个组件，A组件和B组件两个不存在任何套嵌关系，通过路由跳转，就会存在一个问题，值传过来了但是页面HTML没有显示。也就是说如果A组件和B组件在同一个页面，通过eventbus传值是好用的，但是如果不是，就会产生问题。新组件：beforeCreate。新组件：beforeMount。B组件（接收数据的组件）新组件：created。新组件：mounted。A组件（要传值的组件）
vue中兄弟传bus.$on接收值的时候，拿到值，却不渲染页面
weixin_41838734的博客
11-28 5690
兄弟传值的取值是这么写的。 bus.$on('name',funciton(e){ this.name = e }) 发现页面上name的值没有变，是因为this的指向有问题。 所以只要把后边的函数改为箭头函数，即可： bus.$on('name',(e) => { this.name = e }) 这才对！！ ...
关于页面没有刷新，bus.$on()被多次绑定的解决办法
如影随风
05-23 1076
最近在工作遇到问题，发现bus.$on中的函数被多次触发，查阅资料发现，原来是页面没有刷新导致bus.$on被多次绑定的缘故，解决办法也很简单，就是使用bus.$off解绑，具体示列如下： bus.$emit('eventname','') // 触发 bus.$off('eventname') // 页面没有刷新先解绑 bus.$on('eventname',()=>{ ...
vue 路由跳转 页面数据并没有更新，如何解决
weixin_61334593的博客
11-01 4852
vue 路由跳转 页面数据并没有更新，如何解决
vue3 mitt路由跳转后 on事件获取不到值的奇葩问题解决
weixin_45966674的博客
08-06 4037
vue3不再支持大家试用this 那原型链这种东西自然是要命了。比如我们定义 EventBus.emit。这样就可以把所有存在mitt中的值输出出来。你会奇异的发现这个方法压根不会触发。好在我们还有第三方插件mitt。如果我们只想要datas。然后在下一个组件中试用。然后马上进行路由跳转。这个时候估计就很蒙了。
uniapp+vue3+ts h5页面跳转传参
01-18
### UniApp Vue3 TypeScript H5 页面间参数传递方法 在 UniApp 和 Vue3 使用 TypeScript 的项目中，实现 H5 页面间的参数传递可以通过多种方式进行。以下是几种常见的方式： #### 1. URL 查询字符串 通过 URL 查询...
vue3 也有总线传值 (mitt使用闭坑指南)
weixin_46022934的博客
09-10 2071
vue3 总线传值 零、发现mitt的契机 一、总线传值作用是什么(vue中的传值方式)？ 二、Vue2中总线传值的使用 三、Vue3中总线传值的使用 1.通过npm 安装 mitt 安装mitt: 具体操作如下图所示: 2.创建对应的文件 创建mitt实例步骤: 具体如下图内容所示: 3.总线(mitt)的使用 1.组件中的使用方法 ①`Childrenone` 代码如下: ②`ChildrenTwo` 代码如下: ③结果图如下所示 四、一定要读这部分(避免踩坑),非常重要!!!! 使用上面的总线出现的问
vue3数据更新页面不更新
m0_70542915的博客
03-14 4557
笔记
关于vue中使用事件车(Bus)方式实现兄弟组件通信时$on无法获取数据的问题_同一页面下的bus通信为什么数据不显示
2401_84447362的博客
05-09 627
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue数据更新了但是视图不更新
m0_61841474的博客
06-20 5482
然而，在某些情况下，Vue可能无法检测到数据的变化，因此不会触发重新渲染，使用。最近在发生了一件很奇怪的事，明明Vue中data的数据已经更新了，但是页面渲染出来的内容并没有跟随着更新，包括使用elemeUI的时候也有这种情况！通过集成各家所讲，本人简单罗列了可能是以下原因导致的，当然，每个人遇到的情况不一样，甚至还会遇到更加邪门的事情，还需要根据自己的实际情况去排查。Vue在更新DOM时是异步执行的。首先在控制台中打印出最后更新的数据，得出的结果是正确的，也就是说在js中并没有存在处理上的问题。
vue 获取到数据但却渲染不到页面上
热门推荐
军火库
06-18 1万+
很多时候对数据进行处理了，但是页面上就是没变化，没效果，用 console.log 打印数据都没问题，特别是数组、对象容易出现这个问题； 保存变量，（向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性） 删除对象的属性，（如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它）强制更新，迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入
VUE组件通信 兄弟传参 EventBus传递的值无法渲染到页面
ka_xi_ou的博客
04-27 699
Event Bus 的实现 以及传值之后无法能接受但是无法渲染的解决方法
3.为什么我的vue数据修改后视图未更新，梳理Vue2和Vue3中常见的数据不更新场景
最新发布
qq_1401820561的博客
03-22 2238
Vue数据不更新问题的核心在于响应式机制的实现。Vue2受限于Object.defineProperty，需通过辅助方法（如$set）弥补不足；而Vue3通过Proxy提供了更完善的响应式支持。无论是Vue2还是Vue3，理解其原理并遵循“数据驱动视图”的原则，配合最佳实践，都能有效避免视图更新异常。
vue3.0项目中，成功获取后端数据，却发现渲染失败，页面还是没数据？
coder184的博客
02-11 3026
因为响应性不存在的情况下，HTML不会检测任何变量&常量的变化，即使它真的变化了，但不会进行检测，仍然使用最开始的值，所以渲染失败，页面没有数据。注：el-tree是element-plus的树形组件，无须过多关注，利用其它组件完成视图部分即可，建议后续再深入。很明显，ref更简洁，同时reactive，对响应性的维持，更加苛刻，需要借助push等函数。解决的办法：赋予响应性即可，使用ref()或者reactive()。渲染失败的原因，是你声明的东西，不具备响应性，或者响应性丢失。
vue-this.$bus.$on-this.$bus.$emit可以在控制台打印出数据但是页面无法读取数据（无法渲染）
qwq2867309085qwq的博客
11-09 989
解决方法：我们需要借助一个暂放空间，在回调函数中将值缓存到这个暂放空间身上在进行调用即可。this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }
解决vue3 mitt路由跳转后 on事件获取不到值的奇葩问题解决
路虽远，行则必至！
09-06 3556
在Vue升级到3.0版本后，prototype属性就被取消了，所以我们不能再使用Vue2中的Vue.prototype.$bus=new Vue()的方式来使用全局事件总线。在Vue3中，推荐使用mitt这一三方库来帮助我们实现全局事件总线。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值