Vue3(SFC API)子组件emit事件无法传递至父组件问题排查

安全阿岳

2026-8-6

问题：子组件向父组件传递事件无响应

我写了一个极简Vue示例，想实现子组件向父组件传递事件，但父组件的事件处理函数始终不触发。代码如下：

App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
function clicked() {
      alert("clicked in parent")  // 永远不会执行到这里
}
</script>

<template>
  <header>
      <HelloWorld msg="Click me!" @click_text="clicked" />
  </header>
</template>

HelloWorld.vue

<script setup>
const emit = defineEmits(['clickText'])
defineProps({
  msg: {
    type: String,
    required: true
  }
})
function click() {
  // alert("clicked in child") // 这里能触发，说明点击事件走到了这里
  emit('clickText')
}
</script>

<template>
  <button @click="click">{{ msg }} </button>
</template>

请问问题出在哪？

问题原因及解决方案

核心问题是事件名的命名格式不匹配：

子组件中定义并触发的事件是驼峰格式的clickText
父组件模板中绑定的事件是下划线分隔的click_text

Vue的事件名映射规则是：模板中使用**短横线分隔（kebab-case）**的事件名，会自动转换为驼峰格式（camelCase）与子组件的emit事件匹配，但下划线分隔的格式不会被自动转换，因此两者无法对应。

两种修复方案：

方案1：修改父组件的事件绑定格式（推荐）

把父组件中的@click_text改成@click-text，Vue会自动将其转换为clickText，与子组件的emit事件匹配：

<template>
  <header>
      <HelloWorld msg="Click me!" @click-text="clicked" />
  </header>
</template>

方案2：修改子组件的事件定义格式

将子组件的事件名统一改成下划线分隔的click_text，保持和父组件绑定一致：

<script setup>
// 定义下划线格式的事件
const emit = defineEmits(['click_text'])
defineProps({
  msg: {
    type: String,
    required: true
  }
})
function click() {
  emit('click_text') // 触发下划线格式的事件
}
</script>