自 HBuilderX 2.0.0 起支持 uni.$emit
、 uni.$on
、 uni.$once
、uni.$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.$emit
、 uni.$on
、 uni.$once
、uni.$off
四个事件完成。
Tips
- 如果页面没有打开,将不能 注册监听事件
uni.$on
和 uni.$once
。
- 一次性的事件,直接使用
uni.$once
监听,不需要移除。
附件为 demo