vue在子组件中使用 this.$forceUpdate()会报错

Question

这是父组件路由

这是子组件使用强制刷新
就出现下面的报错

这是什么原因

Answer 1

主要问题： 多图片上传时 无法正常预览，查出主要问题就是在赋值时组件并没有进行重绘。

我也碰到需要 使用这个方法的业务场景！ 多图片上传 预览多图的功能。 这块具体 是做成了子组件。 用new FileReader() 来进行多图 预览， 而FileReaderr的onload事件是一个异步回调 在赋值回具体的this.data值时，就不会进行重绘。 我现在的方法就是在onload时候事件时强制每回都重绘一次。 问题就解决了。

具体方法我贴上代码，如果大家有更好的解决方法 欢迎指正。

// files: 上传的多文件集合 this.imgList：存放的变量

for (let i = 0; i < files.length; i++) {

      let reader = new FileReader()
      reader.readAsDataURL(files[i])
      const _this = this
      reader.onload = function (e) {
        _this.imgList[i].result = this.result
        // 强制子组件重绘
        _this.$forceUpdate()
      }
    }