uni-app中的页面间使用$on与$emit

转载:https://blog.csdn.net/weixin_42292991/article/details/105506501

在页面与页面之间通讯时,很多人会直接选择使用在navigato的时候直接拼接字符串来传递。可是当需要传依个比较多数据的的对象的时候这个方式就不是很管用了,为此uniapp给我们提供了页面与页面之间通讯的极为简便的方法。

比如我在下订单页面的时候需要用户选择一个地址去配送,因此我们需要点击之后跳转到选择收货地址页面。而在选择完了收货地址以后需要关闭那个页面返回该订单页面。因此在该订单页面我们需要开启监听用户选择地址的事件。注意在订单页面卸载的时候也要记得关闭该监听。

下面为订单页面的代码:

onLoad() {
			
	//开启监听选择收货地址事件
	uni.$on('choosePath',(res)=>{
		this.path = res;
	})
},
		
//页面卸载
	onUnload() {
		//关闭监听选择收货地址事件
	uni.$off('choosePath',()=>{
		console.log('关闭监听选择收货地址');
	})
},
	
methods: {
	openPathList(){
	    uni.navigateTo({
	        url: '../user-path-list/user-path-list?type=choose'
		});
	},
}	

下面是选择地址的页面:

onLoad(option) {
	if(option.type==='choose'){
		this.isChoose = true
	}
},
 
methods:{
    //选择收获地址
	choosePath(item){
		if(this.isChoose){
			//通知订单页面修改地址
			uni.$emit('choosePath',item)
			//关闭当前页面
			uni.navigateBack({
				delta: 1
			});
		}
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值