nvue page refresh the parent vue page, add the function to refresh the list after the modification is completed

The list page is automatically refreshed after the data is modified

There is an nvue page in the application, and the need to call the pull-down refresh operation of the parent page (vue) needs to be added.
And after adding and modifying data on the operation page, when returning to the list page, the data in the list should be refreshed.
There are many ways to achieve this function, but the simplest is definitely to directly trigger the refresh method of the list.

Normal logic trigger failure

Method flow:

1. Listen to the refresh event in the list page, and perform a pull-down refresh operation in the event.
2. The refresh event that triggers the refresh of the list page is added to the return event of the operation page.

Try to use the relevant method in the official document: nvue and vue communicate with each other

Listen for refresh events

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

Trigger refresh event

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

After testing, it was found that the page did not automatically refresh when returning to the list.

Problem finding and processing

Through log printing, it is found that the refresh method is called, but there is no actual refresh operation.
It should be considered that when returning to the parent page, the page has not completed the display process and cannot be pulled down to refresh.

Optimization process:

1. Monitor the refresh event in the list page and modify the _refresh state in the event.
2. In the list page display event, judge whether to call the pull-down refresh through the _refresh state.
3. The refresh event that triggers the refresh of the list page is added to the return event of the operation page.

Then update the list page code:

	var _refresh=false;//
	onLoad() {
    
    
		//添加监听事件
		uni.$on('refresh', data => {
    
    
			_refresh=true;
		});
	},
	onUnload() {
    
    
		uni.$off('refresh');// 移除监听事件
	},
	onShow(){
    
    
		if(_refresh){
    
    
			uni.startPullDownRefresh(); //刷新
			_refresh=false;
		}
	}

Run, trigger refresh normally, problem solved