Element: 如何在 @close 时正确清理 el-dialog 里调用的子 components

[woozyking]

比方说一个 component 在加载后会调用 API 获取数据并渲染到自己的 template 里，我们叫它<api-component>

请问如何在关闭 el-dialog 时正确清理这个 <api-component> 的所有状态，以确保下次 el-dialog 开启时使 <api-component> 重新调用 API 获取数据等一切改变其自身状态的流程？

[smallpath]

给组件一个key，在@close里修改一下key即可重新触发组件生命周期

[woozyking]

👍 学到了，谢谢

[woozyking]

@Smallpath 还有个后续问题。每次触发 :key 值的变化并重新开启 el-dialog 都会出现之前没出现过的闪屏，何解？

[woozyking]

我把 :key 付值给 el-dialog 里的相关子组件就不会出现闪屏。我估计是因为 :key 值改变后强行触发了 el-dialog 的 transition，然后其 transition 的设计没有预期到这种情况？

[mogocat]

你不需要在关闭后清理，只需要在打开的时候赋值即可。dialog监听open事件（或者watch监听dialog的v-model值），调用method去dispatch（如果用的是vuex）获取api数据。或者在父组件中直接将数据赋值给子组件。