DCloud_UNI_HT
DCloud_UNI_HT
  • 发布:2019-06-13 12:26
  • 更新:2024-11-04 10:38
  • 阅读:109011

如何使用uni.$emit()和uni.$on() 进行页面间通讯

分类:uni-app

自 HBuilderX 2.0.0 起支持 uni.$emituni.$onuni.$onceuni.$off ,可以方便的进行页面的通讯 ,触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等。事件详情

具体如何使用呢?我们假设一个场景,进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。

监听事件

首先,在我的页面监听事件。

// 我的页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
        uni.$off('login');  
    },

因为事件监听是全局的,所以使用 uni.$on ,需要使用 uni.$off 移除全局的事件监听,避免重复监听。

触发事件

进入登陆页面,触发事件

// 登陆页面  
uni.$emit('login', {  
                avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                token: 'user123456',  
                userName: 'unier',  
                login: true  
            });

使用 uni.$emit 触发事件后,对应的 uni.$on 就会监听到事件触发,在回调中去执行相关的逻辑。

更多使用场景

以上只是一个简单的场景应用。而我们开发中会遇到很多页面间通讯场景,如:

  • vue 与 nvue,nvue 与 vue 间的通讯
  • tabbar 页面之间的通讯
  • 父页面与多级子页面间的通讯

基本上述场景均可以实现,本质上就是一个页面通知另一个面我发生了变化,你需要处理一下。绝大部分页面的通讯都可以使用 uni.$emituni.$onuni.$onceuni.$off 四个事件完成。

Tips

  • 如果页面没有打开,将不能 注册监听事件 uni.$onuni.$once
  • 一次性的事件,直接使用 uni.$once 监听,不需要移除。

附件为 demo

16 关注 分享
bandeng 3***@qq.com z***@open-roc.com aliang888 2***@qq.com 昨夜悟空 小鱼摆摆 9***@qq.com 1***@qq.com 1***@qq.com 神威无敌大将军 湛泸煮酒 h***@gmail.com 前端黑板报 1***@139.com 1***@qq.com

要回复文章请先登录注册

靐齉齾麤龖龗

靐齉齾麤龖龗

回复 楚沐扬 :
他这种你b页面还没生成呢,你a页面就已经触发事件了。肯定不行的啊
2024-11-04 10:38
楚沐扬

楚沐扬

回复 靐齉齾麤龖龗 :
感谢解答,我是想问如果使用他这种传参方式的话,我这种场景就不适用了对吧
2024-11-04 10:29
靐齉齾麤龖龗

靐齉齾麤龖龗

回复 楚沐扬 :
这个你可以用https://zh.uniapp.dcloud.io/api/router.html#event-channel,或者你把数据放storage里面,B页面获取
2024-11-04 10:18
楚沐扬

楚沐扬

A页面跳转B页面同时传参,理论上应该是在A页面uni.$emit,B页面uni.$on监听,问题来了,第一次跳转,B页面无法监听到传参,请问如何解决?
2024-11-04 10:15
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi

回复 状态的状zhuang :
我不理解你提到的 vue3 拿到监听信息赋值给 ref 无效的问题,这里我补充了 demo 演示了 pages/index -> pages/about 页面跳转过程中发送信息的处理方案。https://gitcode.net/xiurensha5731/uni-app-questions/-/blob/q/api-emit/src/pages/index/index.vue 如有问题请开新帖艾特我沟通
2023-12-22 16:45
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi

回复 1***@qq.com :
这里我补充了 demo 演示了 pages/index -> pages/about 页面跳转过程中发送信息的处理方案。https://gitcode.net/xiurensha5731/uni-app-questions/-/blob/q/api-emit/src/pages/index/index.vue 如有问题请开新帖艾特我沟通
2023-12-22 16:43
1***@qq.com

1***@qq.com

回复 状态的状zhuang :
想问下那现在vue3要咋个用啊
2023-11-07 15:42
状态的状zhuang

状态的状zhuang

回复 状态的状zhuang :
并且神奇的是$on还是可以监听到事件,拿到数据。但是赋值给ref,就是无效,无响应。我代码测试了几个小时都没找到原因,结果说是取消了。
2023-09-04 22:30
状态的状zhuang

状态的状zhuang

崩溃,Vue3取消了$on,文档也没更新,我搞了几个小时,以为是BUG。
2023-09-04 22:27
l***@sina.com

l***@sina.com

回复 7***@qq.com :
好像是的,如果在webview 或 iframe 里注册事件,外页面是无法触发吧,只能在 里页面 触发
2023-03-29 08:42