场景
以弹窗组件为列,子组件会在父组件首次加载的时候,执行完一次生命周期,第一次调用时,弹窗子组件会进行一次渲染(子组件包含这子孙组件,此时的子孙组件也会进行渲染和初次加载生命周期),关闭子组件弹窗,再次打开时,子组件不会进行二次加载渲染。
需求
想在弹窗组件每次打开时,对子孙组件的数据进行还原(需要重新对子组件进行渲染)
解决方案
1.通过vue虚拟dom的key对比,动态修改key值,可达到重新渲染的效果,给子孙组件TableTransfer组件传递一个更新的动态值,子孙组件就可以达到动态渲染的目的,代码如下:
<TableTransfer :key="dateV" />
open(item) { this.dateV = new Date().getTime() },