图片上传父子组件通信，出现点击删除一张图片结果删除了两张的bug问题。

我的想法是后台返回将数据给上传组件回显，然后点击上传成功后将数据传递给父组件赋值,结果就出现点击删除一条数据页面显示删除两条，但是数据就是只删除了一条

watch(
  () => props.fileList,
  () => {
    let arr: any = []
    let fileList = []
    if (props.fileList) {
      if (typeof props.fileList === 'string') {
        fileList = JSON.parse(props.fileList)
      } else {
        fileList = props.fileList
      }
      fileList.forEach((item: any) => {
        arr.push({
          url: baseUrl.value + item,
          name: item
        })
      })
      uploadData.value = fileList
      fileListShow.value = arr

    }
  },{deep:true, immediate:true}
)

解决办法

因为每一次添加数据后都给父组件赋值，然后父组件又给子组件赋值，咱们可以监听只改变一次的数据，这样的话，显示的数据就只会在第一次获取

watch(
  () => props.flag,
  () => {
    let arr: any = []
    let fileList = []
    if (props.fileList) {
      if (typeof props.fileList === 'string') {
        fileList = JSON.parse(props.fileList)
      } else {
        fileList = props.fileList
      }
      fileList.forEach((item: any) => {
        arr.push({
          url: baseUrl.value + item,
          name: item
        })
      })
      uploadData.value = fileList
      fileListShow.value = arr

    }
  },{deep:true, immediate:true}
)

这样就不会出现页面只点击一次删除出现删除两个的情况了