javascript - Vue JS "PROP MUTATING"用于上传图像

Question

首先抱歉我的英语不好。

我有一个组件，该组件仅用于上传图像。

我正在以 2 种形式运行此组件。首先添加表单，第二次编辑表单。编辑模式打开并发送到 props 图像 URL。

这个..

<ua-single-upload :propsImage="editSingleImage" @uploadImage="addSingleImage = $event"></ua-single-upload>

这工作真好。图片:

如果我重新加载新照片，工作和控制台会出现此错误:“[Vue warn]:避免直接改变 Prop ，因为每当父组件重新渲染时该值都会被覆盖。相反，请使用基于 prop 值的数据或计算属性。正在改变的 Prop:“propsImage”“

并且...

此组件无法与“添加表单”一起使用。我选择图片，不显示不上传... 请 friend 们帮助我..

我希望能够添加新图像并使用组件更新现有图像。

这是我的组件代码...

---

<template>
   <div class="singleImageUpdate p-4">
      <div class="p-4">
         <h4>Kapak Fotoğrafı Seçiniz</h4>
      </div>
      <div class="p-4">
         <input 
            type="file"
            name="fileUrl" 
            id="file" 
            ref="fileInput" 
            @change="onFileChange" />

          <label for="file">Yeni Fotoğraf Ekle</label>

          <button
            class="ml-4"
            type="button"
            v-if="this.propsImage != null"
            @click="onFileDelete"> Fotoğrafı Kaldır </button>


          <button
           class="ml-4"
           type="button"
           v-else 
           disabled 
           @click="onFileDelete"> Fotoğrafı Kaldır </button>
        </div>

        <div class="p-4 mt-4">
          <small v-if="this.propsImage">
              Fotoğraf kırpılmamaktadır, görüntü temsilidir.
          </small>
          <img 
             class="mt-4 shadow-lg"
             v-if="this.propsImage" 
             :src="propsImage" />
        </div>
      </div>
</template>

<script>
  export default{
    data(){
      return{}
    },
    props: {
      propsImage: String
    },
    methods: {
          onFileChange(event) {
            const file = event.target.files[0];
            this.propsImage = URL.createObjectURL(file);
            this.$emit("updateSingleImage", 1);
            this.$emit("uploadImage",event.target.files[0]);
          },
          onFileDelete() {
            this.propsImage = "";
            const input = this.$refs.fileInput;
            input.type = "text";
            input.type = "file";
            this.$emit("updateSingleImage", 0);
            this.$emit("uploadImage", null);
          },
        }
      }

Answer 1

我想说这个警告非常具有描述性，您直接改变属性，这是一种不好的做法，因为父级可能会更改属性值并因此覆盖它。

你应该做的也许是:

在 data 内创建一个响应式属性函数并使用 prop 作为初始值:

props: {
  propsImage:string 
}, 
data(){
  return {
    image: this.propsImage
  }
}

或者如果您想更新 image每当propsImage变化:

watch: {
  propsImage(newValue){
    this.image = newValue
  }
}

或者如果你想更新父组件中的 prop，则发出事件

computed: {
  image: {
    get(){
      return this.propsImage
    }, 
    set(newValue)
    {
      this.$emit('update:props-image',newValue)
    }
  }
}

并将父组件模板内的属性修改为<my-component :props-image.sync="myValue" />

也没有this模板中绑定(bind)到vue实例的context有吗？