DCloud_UNI_HT
DCloud_UNI_HT
  • 发布:2019-06-13 12:26
  • 更新:2023-12-22 16:45
  • 阅读:100584

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

14 关注 分享
bandeng 3***@qq.com z***@open-roc.com aliang888 2***@qq.com 昨夜悟空 小鱼摆摆 9***@qq.com 1***@qq.com 1***@qq.com 神威无敌大将军 湛泸煮酒 h***@gmail.com 前端黑板报

要回复文章请先登录注册

DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 7***@qq.com :
是的
2022-12-29 11:36
3***@qq.com

3***@qq.com

回复 有问 :
是vue2的bus取消了吧?
2022-12-10 20:31
7***@qq.com

7***@qq.com

web-view加载的html里面没法用吗 Uncaught TypeError: uni.$on is not a function
2022-11-23 15:10
刘哲学

刘哲学

在App.vue监听不到呢?
2022-10-27 16:05
神威无敌大将军

神威无敌大将军

哈哈哈
2022-10-22 20:17
Brod_Roy

Brod_Roy

回复 1***@qq.com :
我的想法是你在组件上多加一个参数传递,作为状态值。当事件销毁了之后,改变状态值,子组件即可获取状态变化。
现在过去一个多月了,请问你是如何解决这个问题的呢。
2022-10-22 10:01
1***@qq.com

1***@qq.com

我是页面调用的组件,被调用的组件如何监听到当前界面已经销毁了并且注销 $emit
2022-09-02 23:07
有问

有问

回复 DCloud_UNI_HT :
之前你们自己官网更新升级VUE3时的更新说明,以及VUE3官网上都有介绍。不过现在我没有试过行不行了。现在我是用缓存来做读取的,缓存的方式也不错,有空我再试试吧。
2022-07-25 12:28
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 有问 :
什么地方的介绍 ?现在vue3 是可以使用的。
2022-07-20 10:07
有问

有问

回复 DCloud_UNI_HT :
没取消?之前介绍里不是说取消了吗?就是和vue2写的一样$on,监听无效,但页面监听事件的$on还有效。我看官方也是说取消了$on啊,又复活了?
2022-07-19 15:13