PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

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

    作者:admin来源:网络浏览:时间:2021-09-14 10:32:14我要评论
    导读:自 HBuilderX 2.0.0 起支持uni.$emit、uni.$on、uni.$once、uni.$off,可以方便的进行页面的通讯 ,触发的事件都是 App 全局级别的,...
    自 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 监听,不需要移除。
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-6626-1.html
    相关热词搜索: