Vue3 文件上传时无法将props定义的reset ref值设为false如何解决

• Vue遵循单向数据流原则，子组件不允许直接修改父组件传递的props值，你直接对reset.value赋值的操作会被Vue忽略，因此会出现修改不生效的问题。

1. 首先在子组件的emits中新增update:reset事件，用于通知父组件修改reset的值
2. 将fileUpload函数中直接修改reset.value的逻辑替换为触发update:reset事件，传递false作为参数
3. 父组件使用v-model:reset绑定reset变量，即可自动同步子组件传过来的修改值

修改后的子组件代码 #

<template>
  reset: {{reset}}<br>
  <div class="fileDnd m0">
    <label for="fileUploaderInput" class="">
    </label>
    <input
      type="file"
      name="fileUploaderInput"
      @input="fileUpload"
    />
  </div>
</template>

<script>
import { ref, toRefs } from "@vue/reactivity";
export default {
  name: "Upload",
  props: {
    reset: {
      type: Boolean,
      default: false,
    },
  },
  // 新增update:reset事件
  emits: ["upload", "update:reset"],
  setup(props, { emit }) {
    const { reset } = toRefs(props);
    const fileNames = ref("");

    function fileUpload(event) {
      // 替换直接赋值为触发事件通知父组件修改
      emit("update:reset", false);
      const files = event.target.files;

      emit("upload", files);
    }

    return {
      fileNames,
      fileUpload,
      reset,
    };
  },
};
</script>

父组件绑定示例 #

<template>
  <!-- 使用v-model:reset绑定父组件的reset变量 -->
  <Upload v-model:reset="reset" @upload="handleUpload" />
</template>
<script setup>
import Upload from './Upload.vue'
import { ref } from 'vue'

const reset = ref(false)

// 父组件可以自行修改reset为true，修改会自动同步到子组件
function someResetFunc() {
  reset.value = true
}

function handleUpload(files) {
  // 处理上传逻辑
}
</script>

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