vue 一个页面使用两次相同组件, v-on 受影响

发布于 09-06 10:44 字数 2283 浏览 20 评论 0

在同一个页面中使用了两次同一个组件, 在点击第一个组件后, 第二个组件的 v-on的回调函数受到影响

clipboard.png

在第一个测上传明细组件成功后, 第二次点击实物照片 时的回调变成了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>点击上传</em>自动解析文件</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>

clipboard.png

情况一:

   第一次上传采购明细 控制台打印 `function: handleUploadPurchaseDetailSuccess`
   第二次上传实物照片 控制台打印 `function: handleUploadPurchaseDetailSuccess`
   


大家看下什么毛病, 如果还需要哪里的代码提出来, 我贴上

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

夜吻♂芭芘2022-09-13 10:44:58

我看你刚才写了情况二的,但我测试时也没有遇到情况二。

我的理解是,应该不会有情况二(即出现调用到第二个函数的情况)

因为你在外层的div中加了

handleClickInput: function () {
        document.getElementById('file').click()
      },
      

点击事件,并把点击转移到页面中id为file的元素上,当你页面中同时使用两个组件时,就出现了两个相同的id,于是你的选择器永远只能选择到第一个id为file的元素。

问题就出现在这里,处理你想要的视图效果有很多其它方法,不使用你这个函数就不会出现你这种问题了。

丑丑阿2022-09-13 10:44:58

我也遇见这个情况一的这个问题,在同一个vue页面引用同一个图片上传组件,$emit监听回调的时候,只调用上一个子组件,不知道你有没有解决,

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文