element-ui中el-dialog组件之destroy-on-close属性

一. :destroy-on-close="true"的场景

有一种场景是我们有一个新建按钮，要求每次我们重新打开el-dialog都是干净的内容，所以我们每次点击按钮可能会用以下几种办法。

(1) 对使用的data数据进行重置

(2) 直接对包裹内容区域的dom(组件)使用v-if,销毁/重建dom节点(组件)

(3) 使用:destroy-on-close="true",

但问题是输入value值后，再重新打开内容还是存在。

二 . 问题研究

1. destroy-on-close="true",文档说关闭时销毁 Dialog 中的元素

2. 由源码得到该属性会让class为el-dialog的dom节点重新生成。

   (注意：key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。）

   // html部分    
   ...
   // js 部分
    watch: {
         visible(val) {
           if (val) { 
             this.closed = false;
             this.$emit('open');
             this.$el.addEventListener('scroll', this.updatePopper);
             this.$nextTick(() => {
               this.$refs.dialog.scrollTop = 0;
             });
             if (this.appendToBody) {
               document.body.appendChild(this.$el);
             }
           } else { // 关闭的时候
             this.$el.removeEventListener('scroll', this.updatePopper);
             if (!this.closed) this.$emit('close');
             if (this.destroyOnClose) {
               this.$nextTick(() => { //重新生成class为el-dialog的dom
                 this.key++;
               });
             }
           }
         }
       },
   

三 . 怎么使用这个特点

所以你在当前组件使用时，声明数据全都在my-content组件中，这样当my-content被销毁的时候属于my-content的数据才会一起被销毁