Vue中关闭dialog时销毁DOM、数据等

Vue中关闭dialog时销毁DOM、数据等

背景：今天在写Vue时遇到一个用element-ui的dialog时，里面用路由播放视频的时候，第二个视频无法影响

多个数据共用一个dialog，但是除了第一次点击的时候，触发了引用页面的created()里方法，无论再怎么点击其它数据的方法也无法触发created()，原因应该就是DOM已经渲染完毕不会再次渲染了，所以想要用其他数据就需要销毁一下。

参考文章：https://blog.csdn.net/qq_25135655/article/details/94400290

根据原文章可知此方法可用于多种情况导致dialog内数据无法刷新的问题。

其实你已经想到了，就是隐藏dialog的时候要销毁这个dialog。 度娘后发现给dialog加v-if，在关闭dialog的时候将v-if设置为false这样el-tree会直接将其从DOM结构中抹除，到此问题解决。

    <!--视频播放的弹出框-->
    <el-dialog
      :title="this.dialogVideo.Title"
      :visible.sync="dialogVideoVisible"
      width="80%"
      :before-close="handleClose"
      v-if="dialogVideoVisible"
    >