vue前端，避免重复监听

重复监听，会多次调用接口，（如在批量挂接等导入功能部分），如下图所示

 

如何避免重复监听，定义一个参数，用来存储监听方法，判断是否已存在，如已经存在则先移除监听，再进行新的监听。

data中定义变量readExcelMethod 

      // 避免重复监听
      if (this.readExcelMethod !== null) {
        this.$refs.uploadFile.click()
        this.$refs.uploadFile.removeEventListener('change', 	       this.readExcelMethod)
      }
      this.readExcelMethod = (e) => {
        this.readExcel(e)
      }
      this.$refs.uploadFile.addEventListener('change', this.readExcelMethod, false)