问题
昨天碰到一个需求，需要开闭el-dialog。我在这个dialog里面放了一个el-tree。这个el-tree是根据传进el-dialog的不同主键动态生成的。
其他功能都还好，就是这个el-tree，当我关闭el-dialog再打开的时候，上一个dialog的el-tree的值和状态都会带过来，这显然不是我要的效果
解决
1、分析
为什么会发生这个情况？
因为el-dialog的关闭不是真的关闭，而是隐藏。这就导致一个问题，点击关闭以后，该dialog的内存不会被清除，到下一次再次打开时，就会发生内存污染
2、解决
知道原因就可以针对性的解决。
我们知道，当v-if为false时，vue会移除该v-if标记的dom元素，换言之，会清除这个dom对应的内存空间。
我们解决这个问题也要着落在v-if上面
- 为el-dialog加上v-if，默认值为true
- 用@close函数处理关闭事件，在这个事件中将v-if绑定的值置为false
到这一步其实已经可以解决内存污染了，但是这会导致另一个问题，就是dialog关上打不开。这个时候，需要在watch里面监控父组件传来的值，当值发生变化时将v-if置为true
但是这还不够，因为这种方式依赖于下一次点击事件的发生，也就是说关闭以后再点击自己会打不开。
解决方案是在@close函数中用nextTick再刷新一次v-if的状态
handleClose(){
this.ifShow=false
this.$nextTick(()=>{
this.ifShow=true
})
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/153531.html
