uni-app vue3 微信小程序实现事件监听，回退刷新，回退后状态保持的刷新。跨页面调方法，a页面调用b页面的方法。跨页面刷新数据。子组件触发父组件事件，子组件调用父组件方法。vue 跨组件方法调用，返回上一页刷新数据

需要刷新数据的页面

<script setup lang="ts">
import { onShow, onLoad,onUnload } from '@dcloudio/uni-app';
onLoad(() => {
  // 页面加载时监听事件
  uni.$on("refreshTaskManage",methods.refreshTaskManage)
})
onUnload(()=>{
  // 页面关闭时移除监听
  uni.$off("refreshTaskManage",methods.refreshTaskManage)
})
const methods = {
  // 实现页面数据刷新的逻辑
  refreshTaskManage(){
    console.log("页面被刷新了....")
  },
}

在其他页面，当你想要返回并刷新页面时，可以触发这个事件:

或者不一定是回退刷新，在另外一个页面做某些操作的时候想刷新其他页面的数据的时候也可以用

uni.$emit("refreshTaskManage")
// 因为这里是调用navigateBack返回的，所以返回后页面的各种条件状态这些都是保持了的，处理刷新就可以直接调用获取数据的方法即可
uni.navigateBack()

一次性也可以刷新多个页面的数据

比如层级不只有2级，而是有很多级，一次性也可以调用多个页面的刷新数据的方法

// 刷新数据并且返回上一页(这一个层级的数据都要被刷新一下，也就是有多个页面要刷新数据)
uni.$emit("refresh_repair_record_detail")
uni.$emit("refresh_repair_list")
uni.$emit("refresh_repair_detail")
uni.navigateBack();

备注

在uni-app里边是封装过的可以直接使用uni.$on与uni.$emit,如果是vue2的话跨组件调用方法就需要使用事件总线了，参考：https://www.tnblog.net/notebook/article/details/8455
如果是vue3的话可以使用Vue 3的Provide/Inject与mitt
参考：https://www.tnblog.net/notebook/article/details/8456