当前位置：首页 > article >正文

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

article 2025/3/1 9:59:01

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