DCloud_UNI_HT
DCloud_UNI_HT
  • 发布:2019-06-13 12:26
  • 更新:1 天前
  • 阅读:45930

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

8 关注 分享
bandeng 306816224@qq.com zubb@open-roc.com aliang888 253906501@qq.com 昨夜悟空 小鱼摆摆 980609133@qq.com

要回复文章请先登录注册

有问

有问

打开3个页时,第1页的once就监听不到了怎么办。用on又会重复监听。因为每次返回都要监听,用onUnload也不行
1 天前
xiaoliao998

xiaoliao998

3.1.10.20210415-alpha ,这个版本 subNvue 传参有BUG,无法接到传递参数
2021-04-28 00:45
giao233

giao233

uni.navigateBack({
}) 有几率失效
2021-04-02 18:24
MonikaChen

MonikaChen

楼主,在onLoad里开了uni.$on,然后一直不off,时间久了会出什么bug吗?
2021-03-04 10:11
1046865524@qq.com

1046865524@qq.com

我在a和b页面同时监听, c页面触发,a页面是可以跳转b页面的,a和b都可以跳转c页面,我a页面写了移除监听,那么b页面是不是不用写了,如果写了的话会导致a页面也无法监听;
这个时候问题来了,我b页面不写移除监听,然后用户在b页面直接强退app,下次进来这个监听是不是就重复了!
2020-12-23 09:27
1437448122@qq.com

1437448122@qq.com

回复 PanDQ :
<script>
export default {
data() {
return {
usnerinfo: {
avatarUrl: '',
token: '',
userName: '',
login: false
}
}
},
onLoad() {

},
onShow() {
uni.$on('login', e => {
console.log(e);
this.usnerinfo = e;
});
},
onUnload() {
uni.$off('login');
},
methods: {

}
}
</script>
2020-11-10 09:25
1437448122@qq.com

1437448122@qq.com

更:关于有些页面onLoad用不了用onShow。onLoad是页面刷新加载完后执行的就会在某种情况下导致监听事件失效。比如【tab底部导航】
2020-11-10 09:23
Guozx

Guozx

在callback中使用uni.showToast为什么弹不出来呢?
2020-11-04 11:06
PanDQ

PanDQ

回复 DCloud_UNI_HT :
刚学这个,不知怎么获取监听页面的值
2020-05-27 15:59
PanDQ

PanDQ

回复 DCloud_UNI_HT :
有其他方法获取监听的值吗
2020-05-27 15:57