vue之解决bus总线第一次监听不到数据

最新推荐文章于 2023-12-22 17:02:50 发布
最新推荐文章于 2023-12-22 17:02:50 发布
阅读量1k 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangshiqing0304/article/details/121247294
版权

Vue $nextTick eventBus 数据传递 组件通信
关键词由CSDN通过智能技术生成 
 this.$nextTick(function () {
              //解决第一次监听不到数据
              eventBus.$emit("detailsType", this.details);
                 eventBus.$emit("details", val);
            });

tangshiqing0304
关注
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
总之，解决Vue中使用bus总线时第一次路由跳转数据未成功传递的关键在于理解Vue的生命周期，并合理安排`$emit`和`$on`的执行时机。正确地使用生命周期钩子可以避免这个常见的陷阱，确保数据在组件间顺畅传递。
vue 全局事件总线 $on无法监听到$emit传递过来的数据
weixin_46418764的博客
03-20 869
vue 全局事件总线 $on无法监听到$emit传递过来的数据
Vue中使用bus.$emit触发自定义事件bus.$on却监听不到任何消息
weixin_43239880的博客
02-11 9181
Vue中使用bus.emit触发自定义事件bus.emit触发自定义事件bus.emit触发自定义事件bus.on却监听不到任何消息 Bug情况，我这边有两个模块（区域防控和边界防控），分别使用了同一个地图文件，在地图文件中，只要点击了地图，就会使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.on接收到该事件，就可以对地图的点击做出反应（也就是弹窗）。 如图： 点击后： 本来单个模块使
vue兄弟组件通信eventBus第一次监听不到数据
honeymoon_的博客
01-07 1664
eventBus的$on必须在$emit之前执行。 否则会出现监听不到数据的现象。 有一些网友说，在$emit外加$nextTick或者setTimeout，有些场景这个解决方案是没有作用的。 所以，为了避免bug，eventBus慎用。 先传父组件，由父组件给兄弟组件，也很香。 ...
vue使用bus监听不到的原因
weixin_45367605的博客
02-03 1261
进入路由之前，判断进入这个用户主页是否会本人，不是本人，侧边栏需要换，把事件通过bus传递。 侧边栏创建完就开始监听了，可是一直没监听到。 原因： 1111111是在发送事件的时候执行的，但是侧边栏组件还没开始创建。也就是说我没还监听，这边已经发送了。 ...
用event bus解决vue中无法监听到this.$slots.default变化的
hellenYuan的博客
04-26 4314
用event bus解决vue中无法监听到this.$slots.default变化 （包含去除$slots.default中的空白节点this.$slots.default关于event bus代码实现 this.$slots.default vue官网中提到： default property 包括了所有没有被包含在具名插槽中的节点。 也就是说可以通过$slots.default获取到通过...
解决vue bus.$emit触发第一次$on监听不到问题
10-15
总结来说，解决Vue bus.$emit触发第一次$on监听不到问题需要注意以下几点： 1. 使用$nextTick确保数据传递在子组件创建之后发生。 2. 在路由跳转前移除事件监听，避免重复监听。 3. 在使用$on之前，先用$off注销可能...
vue总线机制(bus)知识点详解
01-19
vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅...
vue中央事件总线解决第一次进去之后不能监听，出来在进去就能触发监听
lyj15390447067的博客
04-20 1353
vue中央事件总线解决第一次进去之后不能监听，出来在进去就能触发监听
事件总线（EventBus）,父子、兄弟组件间通信，一个页面调用另一个页面的方法 & 使用eventbus遇到的问题（多次触发、第一次不触发）
金乌的博客
11-25 3982
组件通信时，有时两个组件之间毫无关系，或者他们之间的结构复杂，这时就要用到 vue 中的事件总线 EventBus的概念。EventBus 又称为事件总线。EventBus的用途：1.解决一个页面调用另一个页面的方法2.解决父子组件、兄弟组件间的通信。
eventbus，在this.$on监听事件时无法在获取数据
最新发布
Wu_whiteHyacinth的博客
12-22 1306
eventbus，在this.$on监听事件时无法在获取数据
vue 数据监听失败原因和解决方式
lin1214000999的博客
09-19 8449
如果操作对象是数组，改变数组的值用Vue的 $ set方法，改变数组的长度用数组的splice方法使数组变化变成可监听的。如果操作对象是对象。如果操作的属性是对象内已经有的值，使用$ watch,加上关键字deep深度监听对象，如果操作的属性是对象内没有的新属性。使用$set使对象变成可监听的。
Vue中央事件总线$bus第一次不触发问题
Liux- 的博客
03-09 1002
Vue中央事件总线$bus跨父子组件通信（解决$bus.$emit 第一次不触发）
Vue中央事件总线$bus跨父子组件无限层级通信（解决$bus.emit 第一次不触发、通信传值数据监听等）
薛定谔的猫的博客
03-31 2826
使用场景： 多种类跨组件全局搜索实现，vuex对于当前场景过于繁琐庞杂，由此想用vue中央事件总线bus去处理。 使用问题： 因为$emit先于$on执行了，所以接受传值的组件无法获得第一次数据； 解决办法： main.js //中央事件总线 Vue.prototype.$bus=new Vue(); 传值组件 onSearch(value) { this.Sdata.svalue=value; // 加定时器，防止$emit先于$on执行了，否则无法获得第一次数据； setTimeout
vue中$emit触发的事件，$on 第一次监听不到数据，利用eventBus解决，并进行页面动态响应
qq_36490598的博客
03-05 7800
组件与页面之间想通过$ emit，来触发一个事件，传递数据，可是当在目标页面利用$on监听事件，获取数据时，发现第一次并不能监听到事件，而返回再次点击就可以监听到数据。 原因在于$ emit 先于$ on 执行了，Vue并没有储存监听事件，所以无法监听到数据。 因为不想用vuex来解决，所以利用eventBus来解决，而且组件不直接通过$on来存储数据，而是利用bus实例来存储数据，然后组件只负责...
vue中使用eventBus为什么接受不到数据
qq_42931285的博客
06-08 2440
eventBus、组件通信
vue eventBus 跳坑的办法
weixin_33919941的博客
04-06 738
前言（feihua）: 最近闲来没事写了一个小的demo，在小的数据传输上没有必要去使用vuex，对于非父子组件的传值方法总结了一点心得体会供大家参考（如有太low，还请大神别喷俺） 先上官方文档： 思路： 1.定义一个空的Vue实例，作为中央事件总线。 2.A组件定义方法去触发自定义事件 3.B组件在钩子里面去监听 OK！看似很简单，实践起来却贼鸡儿坑，一共遇到3个问题： ...
vue3有bus总线吗
09-05
是的，Vue 3中也可以使用bus总线进行组件间通信。在Vue 3中，使用的是mitt库来实现bus总线的功能。你可以通过安装mitt库，并创建一个总线实例来实现组件间的通信。具体操作可以按照以下步骤进行： 1. 使用npm安装mitt库：`npm install --save mitt` 2. 在项目的src目录下创建一个utils文件夹，并在该文件夹下创建一个index.ts文件。 3. 在index.ts文件中引入mitt库并创建一个总线实例，例如：`import mitt from 'mitt'; const bus = mitt();` 4. 在需要使用总线的组件中，可以使用`bus.emit`方法触发事件，例如：`bus.emit('事件名称', 参数)` 5. 在其他需要监听该事件的组件中，可以使用`bus.on`方法来监听事件，例如：`bus.on('事件名称', (e) => { console.log(e); // 其他逻辑操作 })` 注意，emit和on是成对出现的，一个组件发起事件，另一个或多个组件可以接收到该事件，并执行相应的操作。 通过以上步骤，你就可以在Vue 3项目中使用bus总线实现组件间的通信了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue总线机制(bus)知识点详解](https://download.csdn.net/download/weixin_38517904/14801526)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue3.0中使用bus总线](https://blog.csdn.net/weixin_49203377/article/details/116756282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值