uni-app vue3 微信小程序实现事件监听,回退刷新,回退后状态保持的刷新。跨页面调方法,a页面调用b页面的方法。跨页面刷新数据。子组件触发父组件事件,子组件调用父组件方法。vue 跨组件方法调用 电脑版发表于:2024/7/30 11:29 ##### 需要刷新数据的页面 ``` <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() ``` ##### 备注 在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