uniapp的B页面返回到A页面，A页面刷新引入组件的内容

前言

最近做项目有这么一个需求。从A页面路由到B页面添加数据，添加成功就返回A页面，发现A页面引入的组件没刷新数据。

解决

A页面源码
A页面主要是在onShow生命周期中调用子组件方法，从而达到刷新数据的效果。

<template>
	<view class="main">
		<store ref="store"></store>
	</view>
</template>

<script>
	import store from '../../components/store.vue'

	export default {
		data() {
			return {
			
			}
		},
		components: {
			store
		},
		onShow() {
			this.loadData();
		},
		methods: {
			loadData(){
				var that = this;
				// 重点
				this.$nextTick(()=>{
					// 调用子组件的刷新数据方法
				    that.$refs.store.overloadData();
				})
			},
		}
	}
</script>

<style lang="scss">
	<!-- 略 -->
</style>

子组件源码

<template>
	<view>
		<!-- 略 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			
			// 重新刷数据
			overloadData() {
				this.merchantStoreList.length = 0;
				// 这里引用请求后端刷新数据的方法，如this.findAllStore();
			},
		}
	};
</script>

<style lang="scss">
	
</style>

缺点

直接进入A页面时子组件会连续请求两次数据，渲染页面时一次和onShow声明周期一次。具体的可以根据个人来优化。