uniapp,Vue刷新重新加载子组件状态(父页面存在缓存)

这里拿uniapp举例
A页面中存在子组件，B页面中更改子组件后返回A页面，A页面刷新子组件状态。
受uniapp页面缓存影响(keep-alive)只能在onShow页面生命周期中去处理。

这里用到了v-if(创建，销毁)来刷新子组件状态。

先上代码

		<palyAud v-if="forceRefresh"></palyAud>

	onShow() {
			this.forceRefresh = false;
			this.$nextTick(() => {
				this.forceRefresh = true;
			})
		},

主要就是利用 v-if去触发创建销毁，在下一次DOM更新之后执行（$nextTick） 就可做到刷新子组件的目的。

1. 未触发前------------

2.B页面改变子组件自身状态-------------

3.返回到带有缓存的A页面 通过v-if(创建， 销毁)刷新组件状态-----------

成功刷新

下面演示 不使用v-if导致子组件状态不刷新不重新加载的现象

1. 初次加载
   
   2.B页面改变子组件状态
   
   3.返回A页面
   

这里可以看到keep-alive缓存子组件并未刷新状态。