vue中兄弟传bus.$on接收值的时候，拿到值，却不渲染页面

最新推荐文章于 2024-04-28 16:36:06 发布
最新推荐文章于 2024-04-28 16:36:06 发布
阅读量5.4k 收藏 2
点赞数 3
文章标签： vue 兄弟传值 $on
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41838734/article/details/103295156
版权

兄弟传值的取值是这么写的。

bus.$on('name',funciton(e){

      this.name = e

})

发现页面上name的值没有变，是因为this的指向有问题。

所以只要把后边的函数改为箭头函数，即可：

bus.$on('name',(e) => {

      this.name = e

})

这才对！！

 

菜鸟ni
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
vue中使用eventBus遇到数据不更新的问题
u010007013的博客
04-25 8802
今天在项目的一个组件需要向兄弟组件传数据，所以想到了使用eventBus。 首先，我先建立了一个eventBus.js，代码如下： import Vue from 'vue' const eventBus = new Vue() export default eventBus 然后在需要往外传值的组件中引用eventBus.js： import eventBus from '@/assets/j...
EventBus踩坑2
m0_47028632的博客
07-31 255
Vue2中EventBus中的$on触发的事件内部的this指向问题
vue兄弟组件之间用eventbus传值，传值成功但是页面没有变化
最新发布
weixin_45926119的博客
04-28 193
EventBus就如同公交车，通过’$emit’让乘客(即所要传递的值)在发出地上车，在目的地通过’$on’使乘客下车。两个组件，A组件和B组件两个不存在任何套嵌关系，通过路由跳转，就会存在一个问题，值传过来了但是页面HTML没有显示。也就是说如果A组件和B组件在同一个页面，通过eventbus传值是好用的，但是如果不是，就会产生问题。新组件：beforeCreate。新组件：beforeMount。B组件（接收数据的组件）新组件：created。新组件：mounted。A组件（要传值的组件）
关于vue中使用事件车(Bus)方式实现兄弟组件通信时$on无法获取数据的问题
wanghuan1020的博客
09-30 6451
关于vue中使用事件车Bus方式实现兄弟组件通信时$on无法获取数据的问题问题描述原因解决 问题描述 使用使用一个事件车(总线)的方式实现兄弟组件之间的通信，在接收数据时，当前组件获取到的数据一直未null 首先考虑是不是没有执行这一步代码，随便打印一段信息，控制台正常输出 确认监听事件 $on 的周期确实在 mounted 尝试使用 this.$nextClick ，无效 原因 百度的时候发现： 感悟：$on 注册事件 $emit 触发事件，事件应该是先注册而后才能去触发 联想到自己需要通信的两
VUE不同页面间的传值之EventBus传递的值不显示
weixin_49022197的博客
06-28 935
eventBus
Vue中使用bus.$emit触发自定义事件bus.$on却监听不到任何消息
weixin_43239880的博客
02-11 8828
Vue中使用bus.emit触发自定义事件bus.emit触发自定义事件bus.emit触发自定义事件bus.on却监听不到任何消息 Bug情况，我这边有两个模块（区域防控和边界防控），分别使用了同一个地图文件，在地图文件中，只要点击了地图，就会使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.on接收到该事件，就可以对地图的点击做出反应（也就是弹窗）。 如图： 点击后： 本来单个模块使
解决vue bus.$emit触发第一次$on监听不到问题
10-15
主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中的this.$options.data()和this.$data用法说明
10-15
主要介绍了Vue中的this.$options.data()和this.$data用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js this.$router.push获取不到params参数问题
10-15
主要介绍了vue.js this.$router.push获取不到params参数问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-this.$bus.$on-this.$bus.$emit可以在控制台打印出数据但是页面无法读取数据（无法渲染）
qwq2867309085qwq的博客
11-09 829
解决方法：我们需要借助一个暂放空间，在回调函数中将值缓存到这个暂放空间身上在进行调用即可。this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }
vue 数据赋值了 但是视图没有更新
qq_34904695的博客
07-20 4714
针对对象的特定方法 <template> <div> <div> <span>用户名: {{ userInfo.name }}</span> <span>用户性别: {{ userInfo.sex }}</span> <span v-if="userInfo.officialAccount"> 公众号: {{ userInfo.officialAcc
vue bus使用的问题
weixin_50655343的博客
08-08 406
vue bus bug
bus组件传值中的巨坑，第二次才控制台打印，不渲染页面QAQ
qq_43217258的博客
05-08 789
bus组件传值中的巨坑，第二次才控制台打印，不渲染页面QAQ 两兄弟组件one.vue和two.vue，路由如下： { path: '/di', component: Di }, { path: '/xiong', component: Xiong } bus.js代码如下： import Vue from 'vue' var bus = new Vu...
vue兄弟组件之间传值eventBus.js
Zhang's Blog
09-10 925
一、原理 1. 创建一个Vue实例eventBus作为媒介。 2. 在相互通信的兄弟组件中都引入eventBus，让各兄弟组件共用一个事件机制。 3. 通过eventBus.$emit(事件名，参数)传递数据，eventBus.$on(事件名，参数=> {})接收据 二、实例代码 A组件往B组件传递数据data 1.src/utils文件下创建eventBus.js，内容如下： import Vue from "vue"; export default new Vue(); 2.在A，B组
eventbus，在this.$on监听事件时无法在获取数据
Wu_whiteHyacinth的博客
12-22 1144
eventbus，在this.$on监听事件时无法在获取数据
关于页面没有刷新，bus.$on()被多次绑定的解决办法
如影随风
05-23 960
最近在工作遇到问题，发现bus.$on中的函数被多次触发，查阅资料发现，原来是页面没有刷新导致bus.$on被多次绑定的缘故，解决办法也很简单，就是使用bus.$off解绑，具体示列如下： bus.$emit('eventname','') // 触发 bus.$off('eventname') // 页面没有刷新先解绑 bus.$on('eventname',()=>{ ...
Vue事件总线：this.$bus.$emit与this.$bus.$on
热门推荐
skysys的研究小屋
01-15 1万+
1.创建Vue实例 //main.js Vue.prototype.$bus = new Vue(); 2.发射事件 //GoodsList this.$bus.$emit("aaa") 3.监听事件 //home.vue this.$bus.$on("aaa",()=>{ this.$refs.scroll.scroll.refresh() }) 4.示例：监听图片加载 //GoodsListItem.vue <template> <img :src="showImag
在使用事件总线传参时，出现了对应页面的dom元素获取不到最新数据的问题
qq_42724424的博客
05-19 613
1.问题说明 我在登录页面，登录成功后将登录角色名传递到另一个组件（layout.vue），然后该数据要在layout.vue文件中使用，结果该数据的值一直是定义时的空 2.上代码 （1）在login.vue组件中，登录成功后发送该事件 （2）在layout.vue文件中接收该事件 （3）在dom元素中使用该事件 （4）结果是loginRole值一直为空 3.原因分析 数据是接收到了，但是this.bus.bus.bus.on是异步方法，在loginRole发生变化前，dom元素已经加载完了。元素中使
vue2中this.$bus.$emit如何接受一个对象
04-26
在Vue2中，可以使用`$emit`方法来向父组件或者全局事件总线发送事件。如果要传递一个对象，可以将该对象作为`$emit`的第二个参数传递进去。 例如，如果你想要通过`this.$bus.$emit`发送一个名为`update`的事件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值