vuejs v-model 值没有在父级中更新？

Question

使用Vue3

父组件

<template>
   <div class="col-12 col-lg-12">
        <input-image v-model="imageFile"/>                                                            
   </div>
</template>

<script>
import InputImage from "@/Pages/components/InputImage";
export default{
   components : {
       InputImage,
   },
    
   data() {
       return {
          imageFile : null,
       }
   }
}
</script>

输入图像（子）组件

<template>
    <div class="form-group">
        <div
            class="base-image-input"
            :style="{ 'background-image': `url(${imageData})` }"
            @click="chooseImage"
        >
            <span v-if="!imageData" class="placeholder">Featured Image </span>
            <input
            class="file-input"
            ref="fileInput"
            type="file"
            @input="onSelectFile"
            />
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: null,
    };
  },

  methods: {
    chooseImage() {
      this.$refs.fileInput.click();
    },

    onSelectFile() {
      const input = this.$refs.fileInput;
      const files = input.files;
      if (files && files[0]) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageData = e.target.result;
        };
        reader.readAsDataURL(files[0]);
        this.$emit("input", files[0]);
      }
    },
  },
};
</script>

选择文件后，父组件中的 v-model ( imageFile ) 值没有改变，为什么？即使我在 onSelectFile() 方法中向父组件发出输入事件。我在这里以编程方式设置文件名。子组件中的值发生变化，但文件名未反映在父组件中，我希望通过父组件中的 v-model 来反映。

Answer 1

Vue 3 更改了 v-model 更新的事件！

没什么大不了的，但是您将模型 prop 定义为而modelValue不是model，将事件定义为而update:modelValue不是 input 。

因此，在您的情况下，只需更新子组件的方法即可

this.$emit("input", files[0]);

到

this.$emit("update:modelValue", files[0]);

你应该坚强！ https://v3-migration.vuejs.org/writing-changes/v-model.html