Vue在使用事件总线是出现on没有执行

最新推荐文章于 2023-07-07 15:47:32 发布
最新推荐文章于 2023-07-07 15:47:32 发布
阅读量1.1k 收藏 7
点赞数 5
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45626867/article/details/108959751
版权

问题

在跳转页面时，发生事件总线时，on无法接收执行。

分析

因为在emit发射时，on来不及创建，所以无法接收

解决

在这里插入图片描述
给发射事件添加一个延时

这个问题是在写小程序遇到的。

圆内~搁浅
关注
vue 事件总线（总线传值），eventBus的使用
PrimaryColor
08-24 1081
介绍： vue组件通信有很多，比如父子组件，兄弟组件通信，还有vuex。如果两个组件之间不存在父子，也不存在兄弟关系的时候，那要是想在一个组件里面点击了一个按钮，并触发另一个组件刷新数据的时候该怎么办？ 首先可以想到的是使用vuex，点击按钮的时候修改vuex里面的值，然后在另一个组件里面监听这个值，当发生变化的时候并刷新数据。 逻辑上是可以的，不过就是太麻烦了，今天给大家推荐一个新的组件传值方式，总线传值eventBus。 一、首先在main.js里面初始化一个事件总线实例。 其实就是重新构造一
Vue笔记_方法_事件总线
qq_43260366的博客
06-16 270
上述案例中在callback 函数执行时，就会触发实例化对象vm的openBox方法，与此同时$on绑定的回调函数就会被执行，打印值为“开宝箱～，{name：‘超超’}”方法是Vue对象的一个实例方法，它主要用于在Vue实例中监听一个自定义事件，当一个自定义事件被触发时，可以执行一个回调函数来响应该事件。上面案例是监听实例化对象vm的openBox事件，并通过一个匿名函数作为回调函数，当test事件被触发时执行匿名函数(回调函数)。那么如何触发事件呢?
关于 vue-socket.io 中的 sockets 不执行的问题
06-09 1742
订阅后台 socket 中的消息，使用 this.sockets.listener.subscribe 代码示例： export default { name: 'test', data () { return {} }, created () { // 监听后台事件 this.sockets.listener.subscribe('socket_server', (data) => { console.log(data) // 能执行 .
Vue3笔记_mitt库(事件总线)
热门推荐
qq_41196217的博客
10-11 1万+
mitt库在vue3中的使用 Vue3移除了$on $off等自带的自定义事件相关方法，因此在vue3中他推荐我们下载mitt库来使用事件总线传递数据，其实mitt的使用方式和vue原本的自定义事件使用方式相同，所以我们不必担心学习成本！ 安装mitt库 npm i mitt 使用mitt库 可以在单独的文件暴露出事件总线对象 // mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象 /* eventbus.js */ // 这里我们在js中暴露这个事件总线对象 import mit
Vue中使用bus.$emit触发自定义事件bus.$on却监听不到任何消息
sinat_34241861的博客
06-26 3712
问题产生场景 在前端开发任务中，需要实现兄弟组件之间传值。为实现这个目的，采用了 总线 的方式。但是实际结果是当兄弟组件A触发了自定义事件后，兄弟组件B并未监听到相关的信息 问题原因 因为我的代码中$emit()事件先于 $on()监听事件执行了，Vue并没有储存监听事件，所以无法监听到数据。即使用总线方式实现兄弟组件间的传值时，必须保证 $on()监听事件先被创建，否则无法正常监听消息 参考博客链接：https://blog.csdn.net/qq_39081974/article/details/881
全局事件总线，安装，执行以及$on接收不到数据怎么解决
m0_51534164的博客
07-06 2932
全局事件总线：适合任意组件间的数据传递。安装，执行以及$on接收不到数据怎么解决。以及第一次监听不到怎么解决
【解决】（vue3、mitt.js）mitt.emit 发送消息，但是路由跳转后， mitt.on无法在onMounted中获取数据
huangfuyk.的博客
10-03 3040
mitt.js正确引入的前提下，在page1使用mitt.emit 发送消息，路由跳转到page2，但是在page2页面中的onMounted中无法使用mitt.on获取到数据，于是问我这边有没啥想法。同事在做vue3的项目时，引入了。至此实现想要的效果。
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
在Vue.js应用中，我们有时会使用自定义事件总线（bus）来实现非父子组件间的通信，特别是在不涉及路由的场景下。然而，当在路由跳转过程中使用bus进行数据传递时，可能会遇到首次跳转时数据未能成功传递的问题。这个...
在Uni中使用Vue的EventBus总线机制操作
10-15
在Vue开发中，有时我们需要在不直接存在父子或兄弟关系的组件之间传递数据，这时可以利用EventBus（事件总线）这一技术。EventBus是一种轻量级的通信方式，它基于Vue实例，允许我们在不同组件之间共享数据和触发事件...
Vue 中央事件总线的坑
grootbaby
09-04 1823
两个问题： 问题1： 为什么第一次触发的时候页面B中的on事件没有被触发 问题2： 为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。 问题一 第一次触发的时候页面B中的on事件没有被触发 产生原因 当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created中所监听的来自于A中的事......
vue改变子组件从父组件传值时，报错:【 Avoid mutating a prop directly since the value will be overwritten whenever】
闫小样丶的博客
10-27 802
今天在写组件中从父组件中通过props传值之后，在methods中对子组件的值进行重新赋值时候报出错误。 代码所示： Vue.component("opportunity-list-component",{ props: {//这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件 activeTypeIndex: { ...
mitt事件总线组件之间传值时，使用on无法监听到消息的解决
weixin_45299090的博客
07-07 1496
解决使用mitt时间总线时on不能监听到发送出的消息的问题
VUE-Vue.js父组件$on无法监听子组件$emit触发事件解决办法
shenzhen_zsw的专栏
07-20 1559
概述 用$on无法监听子组件$emit触发事件   使用版本 vue.js 2.2.5   问题分析 之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);，这样this指的是todo-item的每一项，而最后vm.$on监听的是app组件，也就出说监听的是父节点，而触发的是子节点，故监听不到这个事件的。   解决思路  将触发事...
【Vue】eventbus 首次$on事件未绑定问题
qq_45677671的博客
08-01 1502
问题背景：A页面跳转到B页面，并传参过去，但是第一次跳转过去不会触发$on事件，第二次能触发但是触发了两次，后面每点一次就会比之前多触发一次
uniapp在不同页面间跳转时使用$emit和$on传值无效问题（记录坑）
a666666000的博客
09-08 1万+
uniapp在不同页面间跳转时使用$emit和$on传值无效问题
关于$emit $broadcast 和&on的个人理解
陈大牛的博客
08-18 1129
总结: (1)当使用$rootScope.$emit("$emit",{})进行冒泡事件的时候，接收冒泡事件从最根元素往下按页面激活注册顺序传播，只有已经进行激活注册监听的控制器可以接收到冒泡事件消息，无论是父级元素(控制器)，兄弟元素，子元素都可以接收到消息，并且接收消息的形式只能用$rootScope.$on("$emit",function(){}) (2)当使用$scope.$emit
Vue 兄弟组件（子组件与子组件间通信）间通信，$on方法失效问题，以及父子组件间通信
laianko的博客
03-30 1451
Vue组件间通信，兄弟组件间，父子组件间
vue拼接html中onclick的触发方式失效的解决方法
weixin_44037153的博客
11-18 2132
vue拼接html中onclick的触发方式失效的解决方法
Vue的Vue-ls使用
盏茶作酒的博客
06-08 2371
Vue插件，用于从Vue上下文中使用本地Storage，会话Storage和内存Storage 一个vue封装的本地储存的方法。 1. 安装 NPM npm install vue-ls --save YARN yarn add vue-ls 2. 使用 import Storage from 'vue-ls'; options = { namespace: 'vuejs__', // key键前缀 name: 'ls', // 命名Vue变量.[ls]或this...
vue3 全局事件总线的使用流程
最新发布
09-13
你可以使用`on`方法来监听特定的事件，并在事件发生时执行回调函数。 ```javascript // 在Component B中监听message事件 eventBus.on('message', (msg) => { console.log(msg); // 输出: Hello from Component...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值