2020-02-02 解决Elment UI的dialog关闭后数据不刷新问题

1. 现象：

子组件中有一个 <vue-cropper> 图像裁剪插件：

<vue-cropper autoCrop :img="avatarSrc" ref="cropper" centerBox/>

通过变量avatarSrc来决定它的img属性，第一次加载的时候是OK的，每当avatarSrc改变的时候，图片都会更新。但是，当关闭这个dialog第二次加载后，更新就失灵了，不管你怎样改变avatarSrc的值，图片都不会变。

2. 解决：

方法1：

问题出在每次当我们隐藏这个dialog的时候，就真的只是隐藏，而不是销毁。elment UI的说明文档里有一个【destroy-on-close ： 关闭时销毁 Dialog 中的元素】类似的属性，但是试了半天好像没什么用。于是又搜了半天，发现要给 dialog 加 v-if，当 v-if 为 false 的时候可以做到真正将之销毁而不是隐藏。这样一来，问题就很简单了，因为本来我们就有一个控制dialog隐藏与否的变量 dialogVisible，直接将他绑定给 v-if 即可：

<el-dialog
  title='我的资料'
  :modal="false"
  :visible.sync="dialogVisible"
  v-if="dialogVisible" //关键是这个
  width="500px"
  :close-on-click-modal="false"
  :destroy-on-close="true" //这个貌似没用
  :before-close="handleClose"
>

方法2：

此外，也可以通过动态创建input 的方法来解决这个问题，在这个方案中，文件选择框，即：<imput type="file">，不会出现在HTML模板中，而是通过代码实时创建：

 methods: {
    clickFile: function () {
      let e = document.createElement("input") //用代码创建文件选择框
      let vm = this
      e.type = "file"
      e.accept = "image/png, image/jpeg"
// 为他创建一个事件监听回调，当选择了一个文件后执行
      e.addEventListener('change', function () { 
        vm.loadImg(this.files[0])
      })
      e.click()
    },
    loadImg: function (file) { // 文件传入loadImg进行处理
      let vm = this
      if (window.FileReader) {
        let fr = new FileReader()
        fr.readAsDataURL(file) //开始加载文件
        fr.onload = function (e) {
          vm.avatarSrc = e.target.result
        }
      }
    },

实测，这样即使不使用 v-if ，也能实时更新，因为这个<input type="file">并不是HTML文档的一部分，也不是DOM的成员，它完全由代码创建，当退出函数的时候即已经被自动销毁了。