Question

对不起，我的英语不好。

我只有一个组件，该组件仅适用于上传图片。

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

这个..

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

这太好了。图片：

如果我要重新加载新照片，则工作和控制台会出现以下错误：“ [Vue警告]：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。数据或基于属性值的计算属性。属性被突变：“ propsImage””

AND ...

此组件不适用于ADD FORM。我选择图片，未显示未上传... 请帮我朋友。.

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

这是我的组件代码...

<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

我说警告很具描述性，您直接对属性进行了更改，这是一个不好的做法，因为父级可能会更改prop值并因此将其覆盖。

您应该做的也许是：

在data函数内部创建一个反应性属性，并使用prop作为初始值：

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上下文吗？

Vue JS“ PROP MUTATING”用于上传图片

1 个答案: