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

首先，对不起我的英语不好

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

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

这个

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

这是如此好的工作。图片：

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

而且

此组件不使用添加表单。我选择图像，不显示不上传。。。 请帮助我的朋友

我想能够添加一个新的图像和更新现有的一个组件

这是我的组件代码

---

卡帕克·福托拉夫·塞萨
叶尼·福托拉夫·埃克尔
福托奥拉夫卡尔
福托奥拉夫卡尔
Fotoğraf kırpılmamaktadır，görüntütemsilidir。
导出默认值{
数据（）{
返回{}
},
道具：{
本体：字符串
},
方法：{
onFileChange（事件）{
const file=event.target.files[0]；
this.propsImage=URL.createObjectURL（文件）；
该.$emit（“updateSingleImage”，1）；
这个.emit（“uploadImage”，event.target.files[0]）；
},
onFileDelete（）{
this.propsImage=“”；
常量输入=此。$refs.fileInput；
input.type=“text”；
input.type=“文件”；
这个.emit（“updateSingleImage”，0）；
这是$emit（“uploadImage”，null）；
},
}
}

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

你应该做的也许是：

在

数据

函数中创建一个被动属性，并将该属性用作初始值：

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

或者，如果您想在

propsImage

更改时更新

image

：

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

或者，如果要更新父组件中的道具，请发出事件

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

并将父组件模板内的属性更改为

---

另外，模板中没有绑定到vue实例的

上下文吗？
首先，感谢Tom，现在正在工作，没有发送错误。我很理解。如果我更改图像，道具会触发数据并更改数据。谢谢
computed: {
  image: {
    get(){
      return this.propsImage
    }, 
    set(newValue)
    {
      this.$emit('update:props-image',newValue)
    }
  }
}