用于上传图像的Vue JS“道具突变”

Question

首先，为我糟糕的英语道歉。

我有一个组件，这个组件只用于上传图像。

我正在将这个组件运行到2个表单中。第一个添加表单，第二个编辑表单。编辑模式打开并发送到道具图像URL。

这个..。

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

这工作真好。图片：

​

​

如果我要重新加载新照片，工作和控制台会给出这样的错误："Vue警告:避免直接修改一个支柱，因为当父组件重新呈现时，值将被覆盖。相反，使用基于道具值的数据或计算属性。

​

​

还有..。

此组件不使用ADD窗体。我选择图片，不显示不上传.请帮我朋友..。

我希望能够添加一个新的图像，并更新现有的一个组件。

这是我的部件代码..。

<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

Id说警告是非常具有描述性的，您正在直接修改属性--这是一种不好的做法，因为父程序可能会更改支柱值，因此会覆盖它。

相反，你应该做的是：

在data函数中创建一个反应性属性，并将该支柱用作初始值：

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

或者，如果您想在image更改时更新propsImage：

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

或者，如果要更新父组件中的支柱，则发出事件。

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

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

此外，模板中没有绑定到vue实例的this上下文，对吗？