uniapp vue3页面跳转对象传参工具(优雅永不过时)

vue3页面跳转对象传参工具

/* 
 vue3页面跳转对象传参工具
>>>>>>>>>>>>> a.vue >>>>>>>>>>>>> 
 uni.navigateTo({
 	url: '/pages/biz/goods/commodityinfo/placeOrder',
 	// 页面跳转传参数(navigateTo 调用成功后)
 	success: (res) => {
		// 发送数据到b.vue
 		res.eventChannel.emit('placeOrder', {
 			data: scope
 		})
 	},
 	events: {
 		// 监听b.vue返回的参数
 		successful(data) {
 			console.log(JSON.stringify(data,null,2))
 		},
 	}
 })
>>>>>>>>>>>>>   b.vue  >>>>>>>>>>>>> 
 
 const {
 	proxy
 } = getCurrentInstance()
 
 //接收a.vue页面数据
 uni.$tool.page.receive(proxy, 'placeOrder', (data) => {
 	console.log(JSON.stringify(data, null, 2))
 })
 
 //发送数据到a.vue
 uni.$tool.page.send('successful', {
 	data: 'placeOrder Success'
 })
 //返回上级页面
 uni.navigateBack({
 	delta: 1
 })
 
 */

export default {
	send(eventName, data) {
		const pages = getCurrentPages()
		const prevPage = pages[pages.length - 2]; // 上一个页面
		prevPage.getOpenerEventChannel().emit(eventName, data);
	},
	receive(instance, eventName, callback) {
		const eventChannel = instance.getOpenerEventChannel();
		if (!eventChannel) {
			console.error('getOpenerEventChannel is undefined');
			return;
		}
		eventChannel.on(eventName, (data) => {
			if (typeof callback === 'function') {
				callback(data);
			} else {
				console.error('Callback is not a function');
			}
		});
	}
}

你可能感兴趣的:(前端系列,uni-app,vue.js,javascript)