前言:返回上一级页面并携带参数适用的场景是从一个列表页跳到详情页,例如详情页内可以删除这条数据,返回列表页希望自动的把这个数据在列表中删除,在不刷新整个列表页的情况下删掉这个数据,这样用户体验在会更友好一些;
1.第一个页面one.vue,在onShow()方法内监听返回的参数,返回的参数在上一级页面定义的变量叫‘returnData’;
<template>
<view>
<navigator hover-class="none" url="/pages/two/two">跳到第二个页面</navigator>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onShow() {
let that = this
uni.$on('returnData',function(data){
console.log('监听到事件来自返回的参数:' + data);
})
},
methods: {
}
}
</script>
<style>
</style>
2.第二个页面two.vue,返回one.vue页面,要传递的参数是index:1
<template>
<view>
<button @click="goBack">点击返回上一页</button>
</view>
</template>
<script>
export default {
data() {
return {
index:1,//返回上一页要穿的参数
}
},
methods: {
goBack() {
uni.$emit('returnData', this.index)
uni.navigateBack({
delta: 1
})
}
}
}
</script>
<style>
</style>