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

相关推荐
codingandsleeping11 分钟前
一个简易版无缝轮播图的实现思路
前端·javascript·css
拉不动的猪1 小时前
简单回顾下插槽透传
前端·javascript·面试
爱吃鱼的锅包肉2 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨2 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
海盗强2 小时前
Vue 3 常见的通信方式
javascript·vue.js·ecmascript
oscar9993 小时前
JavaScript与TypeScript
开发语言·javascript·typescript
橘子味的冰淇淋~3 小时前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
leluckys4 小时前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
shoa_top5 小时前
JavaScript 数组方法总结
javascript
鱼樱前端5 小时前
让人头痛的原型和原型链知识
前端·javascript