zoukankan      html  css  js  c++  java
  • 关于 Vue 自定义按钮组件 $emit(‘click‘) 一次触发两次的问题

    在写自定义组件以及引用时,遇到了一个问题,也就是子组件中明明只做了一次 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
  • 相关阅读:
    AtCoder Beginner Contest 167
    AtCoder Beginner Contest 166
    AtCoder Beginner Contest 165
    AtCoder Beginner Contest 164
    AtCoder Beginner Contest 163
    AtCoder Beginner Contest 162
    AtCoder Beginner Contest 161
    AtCoder Beginner Contest 160
    AtCoder Beginner Contest 159
    自定义Mybatis自动生成代码规则
  • 原文地址:https://www.cnblogs.com/panchanggui/p/15018116.html
Copyright © 2011-2022 走看看