Vue中如何实现父组件file与子组件photo数据的双向绑定

你描述中提到的子组件photo数据对应你代码里的file字段，以下修改对齐你现有代码逻辑，修改后子组件选择文件后会自动同步父组件的file和预览图数据：

1. 子组件（SelectPhoto.vue）修改 #

<template>
  <div class="select">
    <img v-if="previewFile" :src="previewFile" alt="" />
    <img v-else src="/images/empty.jpg" alt="" />
    <label class="btn" for="image-upload">{{ btnLabel }}</label>
    <input id="image-upload" type="file" ref="file" @change="uploadFile" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "SelectPhoto",
  // 声明接收父组件传入的属性
  props: {
    btnLabel: {
      type: String,
      default: "选择图片"
    },
    file: {
      type: File,
      default: null
    }
  },
  data() {
    return {
      previewFile: null,
    };
  },
  methods: {
    uploadFile() {
      const selectFile = this.$refs.file.files[0];
      if (!selectFile) return;
      // 生成本地预览链接
      this.previewFile = URL.createObjectURL(selectFile);
      // 触发sync修饰符对应的更新事件，同步父组件file数据
      this.$emit("update:file", selectFile);
      // 同步预览图数据到父组件
      this.$emit("update:previewFile", this.previewFile);
    }
  },
  // 组件销毁时释放预览链接内存，避免泄漏
  beforeDestroy() {
    if (this.previewFile) {
      URL.revokeObjectURL(this.previewFile);
    }
  }
};
</script>

2. 父组件修改 #

<template>
    <SelectPhoto 
      :btn-label="text.RU.photoSelect.choosePhoto" 
      :file.sync="file"
      :preview-file.sync="previewFile"
    />
    <BaseButton :label="text.RU.photoSelect.knowName" @do="$emit('getResult', file, previewFile)" />
</template>

<script>
export default {
  data() {
    return {
      file: null,
      // 新增字段接收子组件同步的预览图
      previewFile: null
    };
  },
};
</script>

注意事项 #

• 如果你使用的是Vue3，.sync修饰符已整合进v-model，可以把:file.sync="file"替换为v-model:file="file"，:preview-file.sync="previewFile"替换为v-model:previewFile="previewFile"即可
• 可根据业务需要在子组件uploadFile方法中新增文件格式、大小校验逻辑

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