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 方法的时候,就会执行多次

相关推荐
Zuckjet_2 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown4 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy4 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip5 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法6 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴6 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.7 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰7 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息7 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC7 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi