【问题标题】：vuejs v-model value is not updating in parent?vuejs v-model 值没有在父级中更新？
【发布时间】：2021-08-19 18:06:47
【问题描述】：

使用 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>

InputImage（子）组件

<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 反映。

【问题讨论】：

标签： vue-component vuejs3 v-model

【解决方案1】：

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

没什么大不了的，但是您将模型道具定义为 modelValue 而不是 model，并将您的事件定义为 update:modelValue 而不是输入。

因此，在您的情况下，只需从

更新子组件的方法

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

到

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

你应该很坚强！ https://v3.vuejs.org/guide/migration/v-model.html#v-model

【讨论】：

我没有注意到这是一个 v3 问题。你说得对。感谢您指出。