uniapp中使用uni.$emit和uni.$on进行页面通讯传值
自 HBuilderX 2.0.0 起支持 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ,可以方便的进行页面的通讯 ,触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等。事件详情
含义
1.uni.$emit(eventName,OBJECT):监听全局的自定义事件,事件由uni.emit 触发,回调函数会接收事件触发函数的传入参数。
其中eventName为事件名,OBJECT为触发事件附加参数
示例代码如下:
uni.$emit('update',{msg:'页面更新'})
1
2.uni.$on(eventName,callback):监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数。
eventName为事件名,callback为事件的回调函数。
示例代码如下:
uni.$on('update',function(data){ console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg); })
uni.$once:监听全局的自定义事件,事件由uni.emit 触发,但仅触发一次,在第一次触发之后移除该监听器。不需要手动移除监听
uni.$off:移除全局自定义事件监听器
具体如何使用呢?我们假设一个场景,进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。
监听事件
首先,在我的页面监听事件。
// 我的页面 onLoad(){ // 监听事件 uni.$on('login',(usnerinfo)=>{ this.usnerinfo = usnerinfo; }) }, onUnload() { // 移除监听事件 uni.$off('login'); },
因为事件监听是全局的,所以使用 uni.$on ,需要使用 uni.$off 移除全局的事件监听,避免重复监听。
触发事件
进入登陆页面,触发事件
// 登陆页面 uni.$emit('login', { avatarUrl: 'xxx', token: 'user123456', userName: 'unier', login: true });
使用 uni.$emit 触发事件后,对应的 uni.$on 就会监听到事件触发,在回调中去执行相关的逻辑。
更多使用场景
以上只是一个简单的场景应用。而我们开发中会遇到很多页面间通讯场景,如:
vue 与 nvue,nvue 与 vue 间的通讯
tabbar 页面之间的通讯
父页面与多级子页面间的通讯
基本上述场景均可以实现,本质上就是一个页面通知另一个面我发生了变化,你需要处理一下。绝大部分页面的通讯都可以使用 uni.$emit、 uni.$on 、 uni.$once 、uni.$off 四个事件完成。
Tips
如果uni.$off没有传入参数,则移除App级别的所有事件监听器;
如果只提供了事件名(eventName),则移除该事件名对应的所有监听器;
如果同时提供了事件与回调,则只移除这个事件回调的监听器;
提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;
示例:
<template> <view class="content"> <view class="data"> <text>{{val}}</text> </view> <button type="primary" @click="comunicationOff">结束监听</button> </view> </template> <script> export default { data() { return { val: 0 } }, onLoad() { setInterval(()=>{ uni.$emit('add', { data: 2 }) },1000) uni.$on('add', this.add) }, methods: { comunicationOff() { // 因传入了回调函数,只会移除本页面此回调函数的监听 uni.$off('add', this.add) }, add(e) { this.val += e.data } } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .data { text-align: center; line-height: 40px; margin-top: 40px; } button { width: 200px; margin: 20px 0; } </style>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
2020-06-23 查看linux服务器配置信息命令