前言
遇到个需求是在A页面点击搜索框,跳转到B页面列表里面选择用户,然后将选择的用户带回A页面。经过资料查证,可行的方法有三种,这里简要记录一下。
通过事件注册的方式
B页面在页面生命周期 onBackPress 里面做事件的触发,和传参,具体代码如下,
//B页面
<script>
export default {
data() {
return {};
},
onBackPress(options) {
uni.$emit('updateQuery', 'someThingData')
uni.navigateBack({
delta: 1 //返回层级
});
},
}
</script>
//A页面在onshow里面监听该方法即可
onShow(){
uni.$on('updateQuery', data => {
console.log("来自B页面的传参," + data)
})
}
注意:页面生命周期onBackPress 只对app、H5、支付宝小程序生效,其余平台无效,为了更好的兼容性,最好是在当前页面即B页面onUnload生命周期内做事件的注册和传参。
//B页面
<script>
export default {
data() {
return {};
},
onUnload() {
uni.$emit('updateQuery', 'someThingData')
},
}
</script>
通过在返回上一页的成功回调中注册事件
//B页面
<script>
export default {
data() {
return {};
},
methods:{
goBack(){
uni.navigateBack({
delta: 1,
success: (res) => {
//通过uni传递
uni.$emit('updateQuery', 'someThingData');
// 或者通过eventChannel向被打开页面传送数据
res.eventChannel.emit('updateQuery', 'someThingData')
}
})
}
}
}
</script>
//A页面在onshow里面监听该方法即可
onShow(){
uni.$on('updateQuery', data => {
console.log("来自B页面的传参," + data)
})
//对应eventChannel监听
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('updateQuery', data => {
console.log("来自B页面的传参," + data)
});
}
通过getCurrentPages()获取前页面栈
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
//B页面
<script>
export default {
data() {
return {};
},
methods:{
onUnload(){
// 获取当前页上的栈
var pages = getCurrentPages();
//当前页面
var currentPage = pages[pages.length - 1];
//上一页面
var prevPage = pages[pages.length - 2];
//上两页 以此类推
var prevAgainPage = pages[pages.length - 3];
//直接找到要修改的页面 获取修改页面实例 修改数据
prevPage.$vm.updateQuery = 'someThingData'
}
}
}
</script>
//A页面无需监听 可直接使用
onShow(){
console.log(this.updateQuery)
}