解决el-drawer关闭之后组件内数据没有完全销毁

问题描述: 项目中使用到elementui组件库,在使用el-drawer的时候,里面放置了el-form,el-table和el-cards. 当我点击关闭的后,再次打开抽屉组件,组件中只有el-table中的数据被销毁了,el-form和el-cards中的数据都还存在. 使用的是el-drawer组件自带的属性destory-on-close.

解决方法:

具体也不知道为什么使用该属性之后,没有完全销毁,期待有大佬能帮忙解答.

最终使用的方法是在使用自带属性destory-on-close的同时,  增加关闭事件,在事件中将drawer组件的所有数据重置

<el-drawer
            :title="title"
            :visible.sync="drawerVisible"
            destory-on-close
            @close="handleClose"
>
</el-drawer>

handleClose(){
  Object.assign(this.$data,this.$options.data())
}

小知识:

// 1、重置data中的所有数据
// 无论data中的数据如何改变，使用这句就可以恢复初始数据
Object.assign(this.$data, this.$options.data())
 
// 2、重置data中的某个值
// 只会让指定的这个数据被初始化，不会影响到data里的其他数据
// 用this.$options.data()重置组件data时，data()里用this获取的props或method都为undefined
this.formData = this.$options.data.call(this).formData