DCloud_UNI_HT
DCloud_UNI_HT
  • 发布:2019-06-13 12:26
  • 更新:2020-05-27 15:59
  • 阅读:19846

如何使用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

5 关注 分享
bandeng 306816224@qq.com zubb@open-roc.com jeman888@qq.com 253906501@qq.com

要回复文章请先登录注册

cydida

cydida

html 静态页面能否使用
2020-05-08 09:06
wujchao

wujchao

uni.$on接收到的数量,为什么不能赋值给callback之后的变量?直接打印是有值的,但是赋值给data定义的变量不会改变变量的值。
onLoad(option) {
uni.$once('update_userInfo',(data)=>{
console.log('监听上一页面update的数据:',data);
this.this_query=data;
})
console.log("有没有值 :",this.this_query);
}
这样在$once的callback里给this.this_query赋值无效。
2020-04-28 00:34
霍金

霍金

请问一下,为什么我在$on的回调外面赋值操作给data函数的变量没有效果?应该怎么解决?
2020-03-16 17:43
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 656785105@qq.com :
什么平台 ? h5 吗? 你传的多大的数据会被截断?
2020-03-13 15:58
656785105@qq.com

656785105@qq.com

回复 hengandy@vip.qq.com :
在 callback 之外,被里面被赋值的变量就神奇地变回原来的值了。
2020-03-10 16:53
656785105@qq.com

656785105@qq.com

回复 DCloud_UNI_HT :
那如果要用 $emit 传递数据到新打开的页面时,如何监听?(url 参数过长会被截断)
2020-03-10 16:52
656785105@qq.com

656785105@qq.com

用你的demo,在login页面填完登录信息后回到 me 页面,userinfo 并没有更新。在 $on 事件的代码后打印 userinfo,userinfo 并没有被重新赋值。
2020-03-10 16:48
15063023869@163.com

15063023869@163.com

回复 DCloud_UNI_HT :
谢谢 了 学到了
2020-01-07 21:36
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 1471346384@qq.com :
如果页面没有打开,将不能 注册监听事件 uni.$on 和 uni.$once
2019-12-30 10:36
1471346384@qq.com

1471346384@qq.com

有问题,第一次访问在监听的页面时无接收到参数,没有监听到。场景是这样,两个tab,tab1页面上两个按钮,按钮事件传参数访问tab2,一开始启动应用打开的是tab1,而tab2没有打开过,点击tab1页的按钮去打开tab2,这时候tab2上的监听无效!!!继续点击tab1,再按钮访问tab2,监听就起效了.......这就是第一次访问的时候,监听不起效!!!
2019-12-27 12:10