uniapp 微信小程序 页面跳转数据同步 - 下级页面修改上级页面数据
在 uni-app 中,可以通过以下步骤实现从下级页面修改上级页面数据后再调用查询方法:
- 在上级页面中定义一个方法,用于查询数据并更新页面显示。
// 上级页面
export default {
data() {
return {
list: []
}
},
methods: {
// 查询数据方法
queryData() {
// 发起请求获取数据
// ...
// 更新页面数据
this.list = res.data;
}
}
}
- 在下级页面中,通过
uni.navigateBack方法返回上级页面,并将修改后的数据作为参数传递给上级页面。
// 下级页面
export default {
data() {
return {
newData: ''
}
},
methods: {
// 修改数据方法
modifyData() {
// 修改数据
// ...
// 返回上级页面并传递数据
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
prevPage.setData({
newData: this.newData
});
uni.navigateBack();
}
}
}
- 在上级页面的
onShow生命周期方法中调用查询数据的方法。
// 上级页面
export default {
onShow() {
// 查询数据
this.queryData();
}
}
这样,在下级页面修改数据后,会返回上级页面并传递修改后的数据,然后上级页面会重新调用查询数据的方法,更新页面显示。
原文地址: http://www.cveoy.top/t/topic/pbXW 著作权归作者所有。请勿转载和采集!