这里拿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导致子组件状态不刷新不重新加载的现象
- 初次加载
2.B页面改变子组件状态
3.返回A页面
这里可以看到keep-alive缓存子组件并未刷新状态。