关于 Vue 自定义按钮组件 $emit(‘click‘) 一次触发两次的问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在写自定义组件以及引用时，遇到了一个问题，也就是子组件中明明只做了一次 click 的 $emit 操作，却在父组件中触发了两次事件函数。

之后，在网上找了很多方案。
有提及通过 .stop 阻止事件冒泡的方案，但通过多次测试，并没有实质效果。
也有一个是通过 .once 的方案，但是很显然，这个方案并不符合需求。这个方案会使得按钮组件变成一次性触发，不可重复操作。
之后，又找到了一个“曲线救国”的方案，也就是通过 setTimeout 的方式，让同一个事件函数在一定时间内只能被触发一次，避免二次触发。虽然，这个方案，确实解决了问题，但却在复用性上存在极大的问题，尤其是修改原有引用的源码时，需要没处都添加上 setTimeout。所以，这也是不太合理的。

随后，想到了这个问题的根本原因，并不是 $emit 本身的问题，或者说，两次触发 handleClick 函数的，其实是两个地方，而不是都源自于子组件的 $emit 行为。

实际上，第一次触发 handleClick 函数的，确系子组件通过 $emit 提交的 click 事件。而另外的一次触发，则是父组件中，作为一个自定义标签元素的 <yt-button> 本身。

所以，要避免一次点击，两次触发 handleClick 函数，最简单的方式，就是在子组件中，把 $emit('click') 的行为去除掉。因为 click 事件，事实上在父级处就已经做了处理，并不需要在子组件中做新的处理。

目前我测试发现：

1、在el-tree类型的子组件使用$emit(‘click‘)传送事件给父组件时，如果双方监听的事件名为node-click时，就会出现触发两次的现象，

  methods: {
    handleNodeClick(data, node, el) {
      this.selectNode = node
      // console.log(this.selectNodeId, this.idName, node)
      this.$emit('node-click', data, node, el)
      // console.log('DydFile this.$emit...')
    }
  }

<el-container style="height: calc( 100% - 42px )">
      <el-aside style="padding: 20px 20px 0;border-right: 2px solid #EDF2F7;">
        <dyd-file width="260px" @node-click="selectLeftTree" />
      </el-aside>
      <el-container>

2、解决办法

1）双方的事件传递监听方法使用其他名称，不使用node-click，就能实现只触发一次；

2）或者使用此node-click名称，在子组件中不使用this.$emit('node-click', data, node, el)，也可实现只触发一次

  methods: {
    handleNodeClick(data, node, el) {
      this.selectNode = node
      // console.log(this.selectNodeId, this.idName, node)
      // this.$emit('node-click', data, node, el)
      // console.log('DydFile this.$emit...')
    }
  }

在子组件中注销 this.$emit('node-click', data, node, el)，父组件仍然监听次事件名。

 node-click 为回调事件，父组件直接监听

node-click

以上是 关于 Vue 自定义按钮组件 $emit(‘click‘) 一次触发两次的问题 的全部内容， 来源链接： utcz.com/z/377481.html

回到顶部