**vue兄弟组件间用bus传值无法改变data的问题**

最新推荐文章于 2023-07-26 11:31:07 发布
最新推荐文章于 2023-07-26 11:31:07 发布
阅读量1.2k 收藏 11
点赞数 8
文章标签： vue js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StarUCXY/article/details/113733494
版权
使用Vue的$bus进行兄弟组件间通信时，可能会遇到数据无法更新的问题。解决这个问题的关键在于：在main.js中引入bus，发射组件中正确触发事件，接收组件中监听并响应事件。同时，确保在App.vue中使用keep-alive包裹router-view，以保持组件状态，避免数据修改失败。
摘要由CSDN通过智能技术生成

vue兄弟组件间用bus传值无法改变data的问题

vue兄弟组件间传值用this.$bus是很好的方式，几点注意：

  1. 要在main.js里面引用bus：
Vue.prototype.$bus = new Vue();
  1. 发射的组件：
methods:{
   
submit(){
   
      this.$bus
最低0.47元/天 解锁文章
StarUCXY
关注
Vue中非父子组件通过事件总线改变数据但data中数据不变的问题
iloveCodingC的博客
04-23 728
Vue中创建事件总线之后，非父子组件1向非父子组件2发送事件之后，非父子组件2成功接收到事件，并对组件2中的参数进行修改 先在main.js中创建Vue对象并赋给$EventBus实例，代码如下 Vue.prototype.$EventBus=new Vue() 父子组件1（事件发出端）–使用$emit发出事件 <template> <div @click="setp...
vue兄弟组件之间用eventbus传值，传值成功但是页面没有变化
grace姐姐的博客
05-07 2511
之前在做兄弟组件之间传值的时候，用的是eventbus的形式，代码如下 组件a： 组件a中出发了brotherData这个方法并且传了值 在组件b中，用on 来监听brotherData方法并获取值，代码如下 alert的数据已经发生改变了，但是页面上的值并没有发生改变 解决办法很简单，将function改成箭头函数或者提前将this赋值给另外一个变量，解决作用域的问题，就不会出...
关于vue-cli $emit $on 中mounted调用的时候发现无法更改data中的值，或不主动执行$on，兄弟组件之间传值方法
weixin_44853798的博客
09-30 1176
使用Vue脚手架的过程中，希望两个兄弟组件之间进行值的传递，于是经过查询可以使用vue-bus的方法来进行通信。在组件之外定义一个bus.js作为组件间通信的桥梁，适用于比较小型不需要vuex又需要兄弟组件通信的。但是我发现却没法给data中的数据进行值的传递。我将其要发送的内容作为一个属性，同时在emit之前就on操作了。2.）组件中调用bus.js通过自定义事件传递数据。那我只需要在需要的地方拿出这个属性就可以了。此时对于data中的数据的更改是无效的。我们简单的理解一下vue中的传值操作。
Vue $on能拿到数据但是无法更新data数据？
最新发布
m0_65073765的博客
07-26 232
Vue 2.0 重新梳理了事件系统，因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。虽然依然保留了父子组件间的事件流，但有诸多限制，比如不支持跨多层父子组件通信，也没有解决兄弟组件间的通信问题。vue-bus 提供了一个全局事件中心，并将其注入每一个组件，你可以像使用内置事件流一样方便的使用全局事件。你去打断点的时候你会发现里面的组件是先触发事件是on然后在执行到初始化 所以你的值每一次都赋给了上一次的，苦逼啊 辛辛苦苦做了这么多。
Vue的$on方法中不能访问data内定义的变量
qingtian_46的博客
06-15 280
)解决办法：传统的function回调，需要考虑作用域的问题，直接用箭头函数。使用function的话，this指向Bus，使用箭头函数，即箭头函数的this是其外层代码的this,这里的this就指向当前文件的data。})
vue 组件间的通信之子组件向父组件传值的方式
11-20
对于一些简单场景或非父子组件间的通信，不使用 Vuex 的话，可以创建一个全局的 Vue 实例作为事件总线（Event Bus）。 ```javascript // eventBus.js import Vue from 'vue' export const EventBus = new Vue() ```...
VUE兄弟组件传值操作实例分析
10-16
为了实现兄弟组件间的数据传递，Vue.js中引入了事件总线(Event Bus)的概念，通过中央事件管理机制来间接实现数据的传递。 首先，我们来了解兄弟组件间传递数据的基本原理。在Vue.js中，兄弟组件无法直接通信，因为...
vue组件间的传值-小案例
07-06
以上就是Vue组件间通信的基本方式。理解并熟练运用这些技巧，能够帮助开发者更好地组织和管理复杂的Vue应用。在实际项目中，还可能涉及更复杂的通信场景，如使用Vuex状态管理库，或者通过事件总线（Event Bus）进行...
bus.$emit+bus.$on赋值成功取值失败
real_xiaobai的博客
10-21 1594
一、新建bus.js import Vue from 'vue' export default new Vue(); 二、A页面传值 <script> import bus from '../../../static/js/bus'; export default { data(){ return{} }, methods:{ click(row,index){ setTimeout(()=>{ bus.$emit('channel_id',
vue中总线Bus传值的哪些坑
Config_js的博客
05-31 562
动态组件中用总线Bus的坑
vue 中央事件总线使用及无法更新数据问题解决
yemuxia_sinian的博客
09-26 1594
如上图做搜索功能时，因为搜索框和搜索列表页是非父子组件，所以通信的时候就用到中央事件总线来做。一开始自己用的是用vuex + watch，监听搜索值来做，但是这样有个问题：改变左边的搜索类型，重新搜索就没办法触发watch进行搜索了，因为搜索值没变。 用中央事件总线的过程中，遇到了以下一些问题：1、搜索事件多次触发了 2、绑定的事件出发了，但是却没办法修改data的值，也没办法更新视图。分析这些问题之前，先看下一些知识点 一、什么是中央事件总线 有时候两个非父子关系的组件，也需要通信。可以将一个...
关于vue中bus中央数据总线传值的坑
逢山鬼泣的博客
11-17 1644
官网这个方法是非父子组件之间的传值，用了之后才发现父子组件其实也可以用this.bus.$emit('xxx',data) 和 this.bus.$on('xxx',(data)=>{}) 。但是在用这个传值方法的时候发现一个问题，尤其是在父子组件之间用的时候，从一个组件中使用$emit触发事件之后，另一个组件的监听事件$on不生效，官网的意思就是使用bus传值的时候，$on一定要在$emit事件触发之前就要创建，否则在触发$emit事件的时候，$on是监听不到的(因为这个时候$on压根就没有创建)
Vue生命周期和事件总线-----------------------在vue生命周期函数中使用事件总线无法赋值
qq_43573843的博客
01-29 1452
我就遇到了一个奇怪的事情,console.log可以打印出对应的值，但是页面上的变量没有任何变化，还是data()函数里的初始值。 通过查询资料得知原来 vue路由切换时，会先加载新的组件，等新的组件渲染好但是还没有挂载前，销毁旧的组件，之后挂载新组件，如下图所示： 新组件beforeCreate ↓ 新组件created ↓ 新组件beforeMount ↓ 旧组件beforeDestroy ↓ 旧组件destroyed ↓
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
qq_45634989的博客
08-18 6473
使用this调用vue中定义的，data中数据或methods中的方法，报错undefined的原因及解决办法
vue-this.$bus.$on-this.$bus.$emit可以在控制台打印出数据但是页面无法读取数据（无法渲染）
qwq2867309085qwq的博客
11-09 879
解决方法：我们需要借助一个暂放空间，在回调函数中将值缓存到这个暂放空间身上在进行调用即可。this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }
解决Vue使用$bus总线时,路由跳转时数据没成功传递问题
m0_51056513的博客
07-18 2484
$bus总线是vue中路由跳转传递数据的常用方法，适用于传递数据不多的情况，但是在使用的过程中发现，bus总线路由跳转的时候总是不能够成功传递需要传递的数据。
Vue 2.0组件间多方式传值与通信详解
在Vue 2.0中，组件之间的通信和传值是实现模块化和复用的关键。本文将详细介绍四种主要的方法来实现这一目标： 1. **路由参数传递**: - 通过`$router.push()`方法，A组件可以将数据（如`orderId`）作为查询字符串...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值