el-dialog 的各种正确使用姿势 以及 el-dialog destroy-on-close 无效的解决办法

在使用elementUI的弹窗插件el-dialog时，因为每次打开必须要重新渲染里面的内容，所以使用了destroy-on-close属性，发现并没有用：

    

        弹窗内容，这里省略一万行。。。
    

F12打开控制台，发现加不加destroy-on-close属性，关闭dialog，这段代码都存在，而不是消失。

具体原因可以参考以下这个文章：https://www.jianshu.com/p/77d1ba476a6d，重点看下作者介绍的原理即可。

但文章里说的把el-dialog标签写在父组件不写在子组件就也可以让destroy-on-close生效，但实际测试过程中发现这种写法还是无法让元素消失，打开F12还是有元素存在，不是我们想要的效果。

经过测试发现，把el-dialog标签写在父组件不写在子组件再使用destroy-on-close属性，实际它只能初始化dialog组件内部包裹的子组件data数据！！而且子组件的生命周期函数钩子会在关闭弹窗后还会执行一次！！，这样就感觉destroy-on-close很鸡肋。。。因为如果你只是想让表单数据重置，那么这其实相当于你在关闭弹窗的事件写上element表单重置的resetFields()，但如果想要清空数据，初始化也可能不是你想要的清空效果（这里注意：重置不等于清空，重置的是初始化传入的数据，清空是把数据全部置空），可以接着看下下面的小tip：

小Tip：resetFields()无效的办法
如果你是新增和编辑的复用弹窗的情况，你想让打开的弹窗表单数据重置，尤其是想要清空表单数据，当你在关闭弹窗的使用resetFields()，你点击编辑在打开弹窗的时候把数据传入，再点击新增，那么这时候就新增弹窗内还是会显示之前编辑时的数据，感觉resetFields好像不生效，实际正确使用方法应该是先让弹窗打开 this.dialogShow = true 再使用this.$nextTick把数据传入，让数据传入比内置的初始化数据慢一步，这样初始化数据默认就不是你传入的数据。有写过一篇更详细的文章，有此类问题的朋友可以参考：https://www.jianshu.com/p/038580ebf33f

这里提供一份我在线环境测试的各种表单重置数据不会有问题的el-dialog写法demo，可以直接线上调试：

线上调试测试地址：https://codesandbox.io/s/wispy-meadow-yn4yz

一、如果想要把el-dialog标签都写在父组件或者把el-dialog标签整个作为子组件，重置表单（清空）需要配合使用this.$refs.form.resetFields()和this.$nextTick(()=>{})

1、下面是el-dialog标签都写在父组件的使用：

// 父组件

2、下面是el-dialog标签整个作为子组件的使用：

// 父组件

但是注意不管是哪种方式，如若需要清空表单数据，test组件传入的表单数据form都需要监听并用另一个变量info接收并进行深拷贝，内外数据才不会相互影响

// src/components/test.vue 子组件

二、如果想要把el-dialog标签写在父组件，内容写在子组件，更好的替代方案：用v-if或者key来实现，解决以上一切问题！

1、下面是key的使用（test为子组件）：

2、下面是v-if的使用（test为子组件）：

以上效果等同于使用 destroy-on-close，但不推荐使用 destroy-on-close：

3、下面是destroy-on-close的使用，不推荐（test为子组件）：

但是注意不管是v-if或者key或者destroy-on-close哪种方式，如若需要清空表单数据，test组件传入的表单数据form都需要监听并用另一个变量info接收并进行深拷贝，内外数据才不会相互影响，且不能初始化watch就使用immediate:true就触发监听，才能清空数据：

// src/components/test.vue 子组件

这样的话，既重新渲染了，又保证了动画会执行，所有情况都归纳出来了，解决了每次弹窗不同写法无法重新渲染（更多是想要清空数据）问题的懵逼和尴尬，完美。。

作者：追寻1989
链接：https://www.jianshu.com/p/2a11d95ffd2e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。