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

相关推荐
拉不动的猪16 分钟前
vue与react的简单问答
前端·javascript·面试
旭久1 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
阿丽塔~1 小时前
React 函数组件间怎么进行通信?
前端·javascript·react.js
桂月二二2 小时前
Vue3状态管理深度解析:Pinia架构设计与性能优化实践
vue.js
冴羽2 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·svelte
前端菜鸟来报道3 小时前
前端react 实现分段进度条
前端·javascript·react.js·进度条
wuaro3 小时前
RBAC权限控制具体实现
前端·javascript·vue
专业抄代码选手3 小时前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试
_未知_开摆3 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app