比如 我要从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)
}
}