vue3里面,事件触发一次,方法执行多次

这个bug也是我在v2升v3的时候,根据上一个前端写的代码,发现的问题

现在我们两个组件,父组件 parent 和子组件 son,如果我们在父组件中引入自助件的时候,给他命名是驼峰命名法,然后父组件中又有一个方法和子组件的名字类似,就是驼峰的不一样而已,就可能会出现这种问题

下面来看一下代码

父组件 parent:

<script setup lang="ts">
// 注意这里关于子组件的命名
import TeSt from './son.vue'
import { ref } from 'vue'

const someVisible = ref(false)

// 定义的方法名 是 teSt,和子组件的名字 TeSt 只是驼峰的不一样
const teSt = (params: any) => {
  console.log(params, '点击了按钮')
  someVisible.value = !someVisible.value
}
</script>
<template>
  <div>
    <el-button @click="teSt">点击的按钮</el-button>

    <el-dialog v-model="someVisible" title="Tips" width="500">
      <div>
        <!-- 使用子组件 -->
        <te-st />
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped></style>

子组件的代码:

<script setup lang="ts">
import { ref } from 'vue'

const num = ref(0)
</script>

<template>
  <div>
    <h1>{{ num }}</h1>
  </div>
</template>

<style lang="less" scoped></style>

此时当点击按钮触发 teSt 方法的时候,就会执行多次

 

### 解决Vue3上传组件触发两次`on-change`事件的问题 在Vue3环境中,当使用上传组件时遇到`on-change`事件触发两次的情况,这可能是由于多个因素引起的。一种常见原因是存在重复监听器或者某些钩子函数(如生命周期钩子)中多次注册了相同的事件处理器。 对于特定于Element UI中的情况,在`<el-upload>`标签里如果同时定义了`before-upload`和`on-change`属性,并且两者之间发生了交互影响,则可能导致行为异常[^1]。为了防止这种情况发生并确保只响应一次文件选择更改: - **移除潜在冲突**:确认没有其他地方再次绑定相同类型的事件到同一个DOM节点上。 - **优化事件逻辑**:调整业务逻辑使得两个回调不会互相干扰。可以考虑将原本放在`before-upload`里的验证操作移到`on-change`内部执行,从而简化流程控制。 另外值得注意的是不同版本之间的差异可能也会影响最终效果,因此建议查看官方文档获取最新API说明以及最佳实践指导[^2]。 ```javascript // 示例代码展示如何合理设置 onChange 处理程序来避免重复调用 const changeImgClick = (file, fileList) => { // 执行必要的校验或其他预处理工作 const isValidFileSize = checkFileValid(file); if (!isValidFileSize){ ElMessage.error(&#39;文件超出最大尺寸&#39;); return false; } // 继续后续的操作... }; ``` 通过上述措施应该能够有效减少不必要的二次触发现象。当然具体实现还需依据实际项目结构和个人需求做适当修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值