vue项目中,如何让弹窗子组件每次打开,重新进行页面渲染?

539 阅读1分钟

场景

以弹窗组件为列,子组件会在父组件首次加载的时候,执行完一次生命周期,第一次调用时,弹窗子组件会进行一次渲染(子组件包含这子孙组件,此时的子孙组件也会进行渲染和初次加载生命周期),关闭子组件弹窗,再次打开时,子组件不会进行二次加载渲染。

需求

想在弹窗组件每次打开时,对子孙组件的数据进行还原(需要重新对子组件进行渲染)

解决方案

1.通过vue虚拟dom的key对比,动态修改key值,可达到重新渲染的效果,给子孙组件TableTransfer组件传递一个更新的动态值,子孙组件就可以达到动态渲染的目的,代码如下:

<TableTransfer :key="dateV" />

open(item) { this.dateV = new Date().getTime() },