vue3 使用mitt 第一次on接收不到数据

最新推荐文章于 2024-07-30 08:17:54 发布

小黄小黄吃三碗

最新推荐文章于 2024-07-30 08:17:54 发布

阅读量952

点赞数 9

文章标签：前端框架

本文链接：https://blog.csdn.net/weixin_40191457/article/details/135216653

版权

写在前面,mitt属于是全局事件总线,简单易懂但是难以管理维护,比较混乱

在项目列表复用弹窗来显示数据时,

在emit时使用nextTick,on就能接收到数据

最好在使用后off销毁掉bus,防止多次触发

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小黄小黄吃三碗

关注关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue3从0到1开发组件前戏（中）：$emit,$on,$off替代方案

qq_35117063的博客

08-02

2306

本系列中会用到的第三方库一、起因上一篇文章中说过，在Vue的新版本，Vue3中删除了$on,$once,$off等方法，$emit仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序。但是既然是组件开发，那么组件与组件之间的通信，组件与父级之间的通信肯定是少不了的，$emit方法虽然已经能满足半数以上的通信需求，但是剩下满足不了的部分，就是满足不了。所以就要用到市面上的第三方库来作为平替方案了。 Vue3迁移文档中提及:在 Vue 3 中，已经不可能使用这些 API 从组件

vue3事件总线---依赖于mitt实现

peanut

12-28

1187

vue3移除了vue2原有的on、on、on、emit，因此事件总线推荐使用第三方库实现，详情参考官方文档，这里主要记录使用mitt的实现。安装mitt npm i mitt --save 创建事件总线文件 import mitt from 'mitt'; export const emitter = mitt(); // 返回值是一个对象 /* 也就是说 emitter中一共包含以下几个属性方法： on:为给定类型注册事件处理程序； ====》 emitter.on('type',(...a

1 条评论您还未登录，请先登录后发表或查看评论

【解决】（vue3、mitt.js）mitt.emit 发送消息，但是路由跳转后， mitt.on无法在onMounted中获取数据

huangfuyk.的博客

10-03

2796

mitt.js正确引入的前提下，在page1使用mitt.emit 发送消息，路由跳转到page2，但是在page2页面中的onMounted中无法使用mitt.on获取到数据，于是问我这边有没啥想法。同事在做vue3的项目时，引入了。至此实现想要的效果。

解决vue3 mitt路由跳转后 on事件获取不到值的奇葩问题解决

路虽远，行则必至！

09-06

2390

在Vue升级到3.0版本后，prototype属性就被取消了，所以我们不能再使用Vue2中的Vue.prototype.$bus=new Vue()的方式来使用全局事件总线。在Vue3中，推荐使用mitt这一三方库来帮助我们实现全局事件总线。

Vue3事件总线mitt

lq2210320229的博客

04-18

113

新建bus/index.js，代码内容如下。

vue bus emit第一次on监听不到数据

nongcunqq的博客

09-01

811

在主页面中，以dialog方式调用另一个页面，第一次点击时，仅仅是dialog对话框出现，相应数据并没有传过去，再次点击编辑按钮，数据可以正常传输。将所要执行的函数，在$nextTick()里面，用箭头函数执行解决代码 //编辑新闻 handleEdit(index, row) { this.dialogVisible = true this.isShow = true; this.$nextTick(() => { bus.$em

vue3 mitt路由跳转后 on事件获取不到值的奇葩问题解决

weixin_45966674的博客

08-06

3682

vue3不再支持大家试用this 那原型链这种东西自然是要命了。比如我们定义 EventBus.emit。这样就可以把所有存在mitt中的值输出出来。你会奇异的发现这个方法压根不会触发。好在我们还有第三方插件mitt。如果我们只想要datas。然后在下一个组件中试用。然后马上进行路由跳转。这个时候估计就很蒙了。

vue3 全局事件总线mitt，emit发布无效果

qq_43721254的博客

04-12

648

很多刚开始接触vue3的朋友可能不太注意vue3的生命周期，需要注意vue3的setup只会执行一次，很可能把emit和on放在setup中一起执行，最后的结果只能是没有任何效果，最好就是放在onMounted中。

Vue3 mitt提交之后，监听不到，控制台不报错

程先生的博客

07-24

1308

mitt,Vue3,控制台不报错,监听不到数据提交

VUE3使用watch监听响应式数据时，第一次不更新的问题

weixin_43990097的博客

04-07

885

在 Vue 3 的 Composition API 中，watch函数默认不会在初始化时立即执行其回调函数，即它不会模拟 Options API 中watch的immediate: true行为。这是watch函数的设计决定的，它只会在其依赖的值发生变化时执行回调函数，所以通过用onMounted在组件挂载后立即调用一次回调函数，达到immediate的效果。

【vueUse库Utilities模块各函数简介及使用方法--第3篇】

最新发布

xiejunlan的博客

07-30

963

vueUseUtilities函数自定义 useConfirmDialog使用方法useCounter 函数典型实现使用方法useCycleList 函数典型实现使用方法useDebounceFn 函数典型实现使用方法构想中的 useEventBus 函数基于 mitt 的实现基于 Vue 3 provide/inject 的实现使用方法在 Vue 3 中，你可以使用vueUse的其他功能（如状态管理）结合 Vue 的响应性系统和模板语法来创建一个函数。

Vue3-组件高级

fusheng_cn的博客

10-09

165

vue3-组件高级（watch侦听器、组件生命周期、组件之间的数据共享、vue 3.x 中全局配置 axios）

Vue3学习

ianutt的博客

05-14

745

Vue3学习

vue3 + mitt

书读百遍，其义自见

08-16

491

vue3 + mitt

简单粗暴解决$emit第一次传值不成功问题

freeshu的博客

10-15

2658

兄弟页面间传值用emit发送，emit发送，emit发送，on接收，但是如果是跳转页面，A页面发送数据跳转到B页面时候，B页面未创建所以所以发送不了数据，因此可以简单粗暴延时发送数据，等B页面创建完就能监听到数据。 A页面发送 ksxj:function(data){ //延迟1semit发送数据 setTimeout(function(){ uni.$emit('page-popup',data); },1000) } B页面接收 onLoad:function(){ uni.

Vue3兄弟组件传值之mitt

Qdc_k的博客

11-10

869

Vue3中事件总线模式已经被移除，官方建议使用外部库,例如mitt。首先main.ts挂载全局。

mitt事件总线组件之间传值时，使用on无法监听到消息的解决

weixin_45299090的博客

07-07

1250

解决使用mitt时间总线时on不能监听到发送出的消息的问题

Vue3 使用mitt实现兄弟组件通信

challenglistic的博客

07-12

2390

Vue3 使用mitt实现兄弟组件通信，

解决vue中拿不到第一次数据，只能从第二次拿的情况

weixin_45890764的博客

05-02

9602

this.$nextTick 第一种情况：页面改变了，但是数据没有改变，我们使用的是this.$nextTick，官网是这样解释的：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。我们通过案例来了解： <template> <div id="app"> <button @click="change">按钮</button> <test ref="test" @change="change" /&

vue3使用mitt

09-14

Vue 3 不再内置事件总线，但你可以使用第三方库 `mitt` 来实现类似的功能。`mitt` 是一个简单且高效的事件发布订阅库，适用于任何 JavaScript 应用。首先，你需要安装 `mitt` 库。在你的项目中运行以下命令： ``` npm install mitt ``` 安装完成后，你可以在你的 Vue 3 组件中引入 `mitt`： ```javascript import mitt from 'mitt'; // 创建一个事件总线实例 const bus = mitt(); // 在组件中触发事件 bus.emit('eventName', payload); // 在组件中监听事件 bus.on('eventName', (payload) => { // 处理事件回调 }); ``` 注意，这里的 `bus` 可以在任何组件中引入和使用，它将作为一个全局的事件总线。使用 `mitt` 的好处是它非常轻量且功能强大，同时也可以与其他框架和库一起使用。希望这能回答你关于 Vue 3 中使用 `mitt` 的问题！如果还有其他问题，我很乐意帮助你。