uniapp - 返回上一页携带参数或刷新数据

冰糖果粒橙

已于 2023-02-08 16:15:58 修改

阅读量4.4k

点赞数 4

分类专栏： uniapp 文章标签： vue.js 前端 javascript

于 2022-11-25 10:11:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46324536/article/details/128032991

版权

uniapp 专栏收录该内容

10 篇文章

订阅专栏

本文介绍在uni-app中如何处理返回页面不触发onLoad的情况，以避免频繁刷新数据。通过使用$emit和$on方法，可以在特定情况下（如从详情页返回列表页）才触发数据刷新。在详情页中触发一个事件并携带参数，列表页监听该事件并接收到参数后调用刷新数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在uni中，返回页面是不会触发onLoad方法的；

如果我们只想在特定情况下返回上一页才需要刷新数据，那么用onShow的话，那刷新就太频繁了；

这时候，可以用$emit和$on去解决。

比如说，从详情页(detail.vue) 回到列表页(list.vue)：

详情页(detail.vue)：

methods:{
	back() {
        let a = 1
        //携带参数
		uni.$emit('refreshData',a);
		uni.navigateBack(1)
	}
}

列表页(list.vue)：

onLoad() {
	// 正常进入该页面的获取数据
	this.getList();
	// 从详情页返回该页面的获取数据
	uni.$on('refreshData',res => {
        console.log(res); //接收参数 a
		this.getList();
	})
},
methods:{
	getList() {
		// 请求数据接口
		... ...
	}
}