uni-app 页面通讯uni.$on 和 uni.$emit

36人浏览 / 0人评论

uni-app的页面通讯这个方法封装的特别好用,用处使用的比较广泛,比如登录,返回上一页刷新(甚至上几页刷新)、即时通讯等等都可以用到页面通讯方法。

使用场景案例

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

首先先打开个人页面,先通过个人页面的uni.$on监听,然后进入登录页面的时候触发监听事件即可

个人页面(监听事件)

// 个人页面
onLoad(){  
    // 监听事件  
    uni.$on('login',(user)=>{  
        this.usnerinfo = user;  
    })  
},

 

登录页面(触发监听)

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

就这么简单实现了页面通讯技术,前提的就是先打开监听事件的页面

全部评论