nvue页面刷新父vue页面，添加修改完成后刷新列表的功能

曾经终败给现在 2023-02-09 05:29 15阅读 0赞

# 修改数据后列表页自动刷新 #

应用中有一个nvue页面，需要添加调用父页面（vue）的下拉刷新操作的需求。  
及在操作页面有数据的添加修改操作后，返回到列表页面时，列表的数据应该刷新。  
实现这个功能的方法有很多种方法，但是最简单的肯定就是直接触发列表的刷新方法了。

# 正常逻辑触发失败 #

方法流程：

1.  在列表页中监听refresh事件，在该事件中行下拉刷新操作。
2.  在操作页的返回事件中增加触发列表页刷新的refresh事件。

尝试使用官方文档中的相关方法：[nvue 和 vue 相互通讯][nvue _ vue]

**监听刷新事件**

onLoad(e) { 
    	//添加监听事件
    	uni.$on('refresh', function(data) { 
    		console.log(JSON.stringify(data)); //正常打印日志
    		uni.startPullDownRefresh(); //无法正常刷新
    	});
    },
    onUnload() { 
    	uni.$off('refresh');// 移除监听事件
    }

**触发刷新事件**

//触发refresh事件
    uni.$emit('refresh', { 
    		msg: '刷新列表数据'
    	});

经过测试，发现返回列表时页面没有自动刷新。

# 问题查找处理 #

通过日志打印，发现有触发刷新方法调用，但是没有实际的刷新操作。  
考虑应该是返回父页面时，该页面还未完成显示过程，无法执行下拉刷新。

优化流程：

1.  在列表页中监听refresh事件，在该事件中修改\_refresh状态。
2.  在列表页面显示事件中通过\_refresh状态判断是否调用下拉刷新。
3.  在操作页的返回事件中增加触发列表页刷新的refresh事件。

遂更新列表页面代码：

**运行，正常触发刷新，问题解决**

[nvue _ vue]: https://uniapp.dcloud.io/use-weex?id=nvue-%e5%92%8c-vue-%e7%9b%b8%e4%ba%92%e9%80%9a%e8%ae%af