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

相关推荐
yuehua_zhang13 分钟前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app
EndingCoder3 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手3 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
学习3人组3 小时前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg7 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz9 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
大怪v9 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山9 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin10 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip10 小时前
结合Worker通知应用更新
前端·javascript