Uniapp小程序返回上一页 传递数据
时间: 2025-01-20 15:27:05 浏览: 63
### 实现 Uniapp 小程序页面返回时传递数据
在 Uniapp 中,可以通过 `getCurrentPages()` 获取当前页面栈中的页面实例,并利用 `$vm` 属性访问目标页面的 Vue 实例来传递数据。以下是几种常见的方法:
#### 方法一:直接修改上一页面的数据属性
当需要简单地向回退的目标页面传递少量数据时,可以直接设置其数据属性。
```javascript
chooseAddress(item) {
let pages = getCurrentPages();
let prePage = pages[pages.length - 2];
prePage.$vm.address = item;
uni.navigateBack({
delta: 1
});
}
```
这种方法适用于简单的场景,在不涉及复杂业务逻辑的情况下可以快速实现需求[^3]。
#### 方法二:通过调用上一页面的方法
如果希望更灵活地控制接收到的数据处理方式,则可以在前一页预先定义好相应的方法用于接收参数并做进一步操作。
```javascript
// 当前页代码片段
let pages = getCurrentPages();
let prePage = pages[pages.length - 2];
prePage.$vm.editAddress(item);
uni.navigateBack({delta: 1});
```
对应的前置页面应提前准备好相应的函数以便被调用。
#### 方法三:使用全局事件总线机制
对于更加解耦合的设计模式来说,推荐采用发布/订阅模式来进行跨组件通信。这样做的好处是可以让两个页面之间保持松散联系的同时完成信息交换的任务。
```javascript
// 后端页面发送消息给前端页面
uni.$emit('refreshPreviousPage', params);
// 前置页面监听该事件并在适当时候做出响应动作
onShow() {
uni.$on('refreshPreviousPage', (params) => {
this.refreshData(params);
});
},
methods: {
refreshData(params) {
console.log(`Received data from previous page`, params);
// 执行具体的数据刷新逻辑...
}
},
onUnload() {
uni.$off('refreshPreviousPage');
}
```
此方案不仅限于父子级关系间的通讯,还可以应用于任何有交互需求的不同层级之间的视图组件间[^2]。
综上所述,开发者可以根据实际应用场景选择合适的方式去满足项目的需求。无论是哪种途径都能有效地达成从子页面带回母页面所需的信息传输目的。
阅读全文
相关推荐


















