JohnnyHy
JohnnyHy
  • 发布:2020-05-08 16:42
  • 更新:2023-12-22 20:23
  • 阅读:3524

uni.$emit在第一次打开页面的时候新页面无法监听到该事件

分类:uni-app

详细问题描述

在使用uni.$emit进行页面跳转传参时第一次打开新页面监听不到该事件

重现步骤

IDE运行环境说明

HBuilderX

[IDE版本号]2.6.16

[mac版本号]10.15.4

联系方式

[QQ]512146667

2020-05-08 16:42 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

这是一个老贴了。

感谢反馈,感谢评论中社区小伙伴的支招。这里我补充了 demo 演示了 pages/index -> pages/about 页面跳转过程中发送信息的处理方案。

https://gitcode.net/xiurensha5731/uni-app-questions/-/blob/q/api-emit/src/pages/index/index.vue

文章解释的更多 文章总结 https://ask.dcloud.net.cn/article/40905

核心代码在这里

// 这里演示,从 index 跳转到 about 时候,传递信息  
const go = () => {  
  uni.navigateTo({  
    url: "/pages/about/index?msg=hello",  
  });  
};  

onLoad(() => {  
  // 思路是先发注册监听、再发送信息。此时 page2  
  // 跳转后之后才会激活页面,才会收到 on 事件  
  uni.$on("page2Ready", function (data) {  
    console.log("page1 收到 page2 发过来的信息", data);  
    uni.$emit("update", { msg: "页面更新" });  
  });  
});  

onUnload(() => {  
  uni.$off("page2Ready");  
});

在 page2 中先建立监听,再让 page1 发送信息过来

onLoad(() => {  
  uni.$on("update", function (data) {  
    console.log("page2 监听到事件来自 update ,携带参数 msg 为:" + data.msg);  
  });  
  uni.$emit("page2Ready", { msg: "page2 准备好了,你发送吧" });  
});  
onUnload(() => {  
  uni.$off("update");  
});

如果问题,请继续和我沟通

1208net

1208net

给你一个思路,延迟uni.$emit传参

  • Datahunter

    这思路确实可行,随便给个延迟时间

    setTimeout(()=>{

    uni.$emit('set',1)

    },1)

    2020-12-31 15:37

zhangrl

zhangrl

我的解决方案是 ,跳转后再onReady 中先注册uni.$on 再向 父组件发送 uni.$emit("Ready");,在福层接收到Ready之后向子页面发送参数,同时所有uni.$on都要在onUnload中销毁

  • DCloud_UNI_OttoJi

    感谢社区小伙伴的热心支招,点赞加送分感谢

    2023-12-22 16:37

hws007

hws007 - 我就是我!

需先监听uni.$on,再uni.$emit

  • DCloud_UNI_OttoJi

    感谢社区小伙伴的热心支招,点赞加送分感谢

    2023-12-22 16:37

夜舞

夜舞 - java,web全栈工程师

一样 我有3个页面 a b c 我想把a的值传到 c 用这个不起作用

x***@outlook.com

x***@outlook.com

试试页面生命周期的onShow 方法看看能不能监听到

m***@163.com

m***@163.com - 鸦雀銮翎

一样的问题 $on $once 都是 第一次不管用 再开就有了

m***@163.com

m***@163.com - 鸦雀銮翎

确实是监听先于触发执行,试了await异步触发,也不管用, 延迟setTimeout 10ms是可以用的, 但不知道延迟的时间会不会受到系统和机型的影响,又试了vuex,这个当然没问题,但是只用于传递动态模板的动态数据,有余数据字段是动态的,不能在store里面处理,所以不想启用vuex,最后发现一个简单粗暴的工具…… globalData ……

  • 4***@qq.com

    我遇到了这样的问题,uni.$on页面是监听不到事件,必须进入这个页面再退出然后可以监听到事件,这是官方BUG还是我操作得问题

    2020-09-26 17:24

  • m***@163.com

    回复 4***@qq.com: 不能算是bug,因为进入一次有监听器的页面才会启动监听,但是触发监听是在父页面,或者同级页面,所以会导致先触发事件后执行监听的情况,退出再进可以监听到是因为第一次进入启动了监听,父页面进子页面的话可以考虑父页面延迟30~50ms触发监听(uni.$emit),同级或多页面的话建议globalData或者启用vuex

    2020-11-25 15:14

  • x***@qq.com

    回复 m***@163.com: 大佬能否细说一下如何用这个vuex进行传参 是不是就是定义一个临时的变量temp 然后每次任意页面需要传参的时候就都赋值给这个temp 在去取temp里面的值

    2021-10-17 15:06

倾斜的水瓶座

倾斜的水瓶座

试试先监听,再跳转。

该问题目前已经被锁定, 无法添加新回复