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

Posted 2023-02-23

【中文标题】vuejs v-model 值没有在父级中更新？

【英文标题】：vuejs v-model value is not updating in parent?

【发布时间】：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 反映。

【参考方案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 问题。你说得对。感谢您指出。