vue 一個(gè)頁面使用兩次相同組件, v-on 受影響

在同一個(gè)頁面中使用了兩次同一個(gè)組件, 在點(diǎn)擊第一個(gè)組件后, 第二個(gè)組件的 v-on的回調(diào)函數(shù)受到影響

在第一個(gè)測(cè)上傳明細(xì)組件成功后, 第二次點(diǎn)擊實(shí)物照片 時(shí)的回調(diào)變成了handleUploadPurchaseDetailSuccess

upload.vue

<template>
  <div>
    <div class="el-upload el-upload--text" @click="handleClickInput">
      <div class="el-upload-dragger">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text"><em>點(diǎn)擊上傳</em>自動(dòng)解析文件</div>
      </div>
      <input type="file"
             name="file"
             id="file"
             accept="accept"
             class="el-upload__input"
             @change="handleFileChange">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
      props: {
          accept: {
              type: String,
        default: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
      }
    },
    data () {
      return {
          file: {}
      }
    },
    mounted () {},
    methods: {
      handleClickInput: function () {
        document.getElementById('file').click()
      },
      handleFileChange: function (event) {
        this.file = event.target.files[0]
        this.upload()
        event.target.value = ''
      },
      upload() {
        const self = this
        if (self.file) {
          var formData = new FormData()
          formData.append('file', self.file)
          self.$api.post('/file/upload', formData, function (res) {
              const fileInfo = {
                  fileId: res,
              fileName: self.file.name
            }
            self.$emit('upload-success', fileInfo)
          }, function (e) {

          })
        }
      }
    }
  }
</script>

情況一:

   第一次上傳采購明細(xì) 控制臺(tái)打印 `function: handleUploadPurchaseDetailSuccess`
   第二次上傳實(shí)物照片 控制臺(tái)打印 `function: handleUploadPurchaseDetailSuccess`
   

大家看下什么毛病, 如果還需要哪里的代碼提出來, 我貼上