vue 子组件向父组件通信$emit事件执行次数不对应变少?

Question

$emit事件执行一次或多次,但是不会全部执行

在上传那视频的时候如果后端返回uuid说明文件已存在,抛出自定义事件

相关代码

getUploadParam(file, params) {

  this.$http.getUploadParam([params]).then((result) => {
    if (result.code == 200) {
      const [{ url, uploadProgress: { uuid, offset } }] = result.result
      if (uuid) {
        file.progress = 100
        file.uuid = uuid
        this.$emit('success', file)
        console.log('我已经上传了')
        this.fileList = this.fileList.filter(s => {
          return s.name != file.name
        })
      } else {
        this.upload(file, offset, url)
      }

    }

  })
}

相关代码

<gy-upload-video
  @success="success"
  @upload="upload"
></gy-upload-video>

相关代码

success(file) {
  console.log('上传成功为什么不会打印啊')
  const tagId = this.tagId
  const type = this.tabIndex
  let Names = file.name.split('.')
  Names.length = Names.length - 1
  let name = Names.join()
  const { coverUuid, _duration: duration, md5: fileMd5, name: fileName, size: fileSize, uuid: fileUuid, } = file
  const data = {
    coverUuid, duration, fileMd5, fileName, name, fileSize, fileUuid, tagId, type
  }
  this.uploadFile(data)
  this.uploadQueueFile = this.uploadQueueFile.filter(s => {
    return s.name != file.name
  })
  console.log(this.uploadQueueFile)
}

批量上传success只会执行一次或多次,但是执行次数和上传文件数量不匹配

Answer 1

这里执行次数是对的

Answer 2

碰到同样的问题，逐步排查是循环渲染加了:key的影响。每次传递出来事件因为业务逻辑导致key变化了，所以第二次事件不会分发出来。