Vue+Vuetify子组件上传图片后同步更新父组件视图问题

问题根源 #

你当前的写法在@change事件里同时执行uploadImage($event)和$emit('setImg',previewImage)，但uploadImage中生成预览图的操作（比如FileReader读取文件）是异步的——emit执行时，previewImage还没更新成新图片的地址，所以父组件拿到的始终是旧值。

修复方案 #

把$emit移到uploadImage函数内部，等预览图生成完成后再触发，确保传递的是最新的图片地址。

子组件修改 #

模板部分

<v-file-input @change="uploadImage"></v-file-input>

脚本部分

methods: {
  uploadImage(event) {
    const selectedFile = event.target.files?.[0];
    if (!selectedFile) return;

    const reader = new FileReader();
    // 等文件读取完成后更新预览图并通知父组件
    reader.onload = (e) => {
      this.previewImage = e.target.result;
      this.$emit('setImg', this.previewImage);
    };
    reader.readAsDataURL(selectedFile);
  }
}

父组件配合处理 #

确保父组件正确接收并更新图片地址：

模板部分

<YourChildComponent @setImg="updateDisplayImage"></YourChildComponent>
<v-img :src="displayImage" alt="预览图片"></v-img>

脚本部分

data() {
  return {
    displayImage: ''
  };
},
methods: {
  updateDisplayImage(imgUrl) {
    this.displayImage = imgUrl;
  }
}

这样修改后，每次上传新图片时，只有当预览图生成完成，才会通知父组件更新显示，就能保证父组件展示的是最新上传的图片。

内容的提问来源于stack exchange，提问作者jaidevsairwa