在调用uni.navigateBack前怎么将参数或者说数据带回上一个页面

比如 我要从B页面返回A页面

方法一:使用A页面原有的onShow生命周期

注意:此方法只适用于小程序端,h5端会报错:如下
[Vue warn]: Error in v-on handler: “TypeError: prevPage.onShow is not a function”
小程序端、h5端都适用的方法请看下方的方法二

在B页面中

// 这是需要传递的参数
let obj = {
	name: '张三',
	age: 20
}
// 获取当前页面栈
let pages = getCurrentPages()
// pages数组中的最后一个为当前页面,倒数第二个为上一个页面
let prevPage = pages[pages.length - 2]
// 调用上一个页面的onShow函数,将参数传入进去
prevPage.onShow(obj)
// 然后调用navigateBack返回页面
uni.navigateBack({
	// 这个属性表示返回1个页面
	detal: 1
})

在A页面接收参数

// 直接在A页面的onShow生命周期中接收参数即可
onShow (obj) {
	if (obj) {
		// 这里将打印出{ name: '张三', age: 20 }
		console.log(obj)
	}
}

方法二:A页面自定义方法接收参数(建议使用)

在B页面中

// 这是需要传递的参数
let obj = {
	name: '周某某',
	sex: '女'
}
// 获取当前页面栈
let pages = getCurrentPages()
// pages数组中的最后一个为当前页面,倒数第二个为上一个页面
let prevPage = pages[pages.length - 2]

// 重点来了
// 调用$vm 注册一个自定义方法 将参数传入进去
prevPage.$vm.customFun(obj)
// 然后调用navigateBack返回页面
uni.navigateBack({
  	// 这个属性表示返回1个页面
  	delta: 1
})

在A页面中接收参数

// 在A页面的methods属性中定义一个方法,方法名与上面的一致
methods: {
	// 这个方法就是B页面中调用$vm注册的方法,参数为B页面中传递过来的数据
	customFun (obj) {
		if (obj) {
			// 将打印出 { name: '周某某', sex: '女' }
			console.log(obj)
		}
	}
}

方法三:调用setData()方法

注意:此方法也只适用于小程序端,在h5端会报错:如下
Error in v-on handler: “TypeError: prevPage.setData is not a function”

在B页面中

// 这是需要传递的参数
let obj = {
	name: '张某人',
	sex: '男',
	age: 21
}
// 获取当前页面栈
let pages = getCurrentPages()
// pages数组中的最后一个为当前页面,倒数第二个为上一个页面
let prevPage = pages[pages.length - 2]
// 直接调用上一个页面的setData()方法,把数据存到上一个页面中去
prevPage.setData({
	obj
})
// 然后调用navigateBack返回页面
uni.navigateBack({
  	// 这个属性表示返回1个页面
  	delta: 1
})

在A页面中接收参数

// 在onShow生命周期中接收参数
onShow () {
	// 获取页面栈
	let pages = getCurrentPages()
	// 取得当前页面
    let currPage = pages[pages.length-1]
    if (currPage.data.obj){
    	// 将打印出{ name: '张某人', sex: '男', age: 21 }
      	console.log(currPage.data.obj)
    }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值