如何正确触发以字符串参数传递给emit()函数的事件？——Vue父子组件事件传递问题排查

咱们来一步步拆解问题所在，然后把它修复好。你的核心问题在于父组件里的emit用错了方向，导致你以为会触发内部的showComponent函数，但实际上是在向父组件的上层组件发送事件，而上层组件并没有监听这个事件，所以功能没生效。

错误原因详解 #

1. 父组件中定义的const emit = defineEmits<{ (event: string): void; }>()，这个emit是用来向父组件的父组件（也就是当前父组件的上层组件）触发事件的，不是用来调用当前组件内部的函数。
2. 当你在emitAction里执行emit(callbackName)时，相当于告诉上层组件“我触发了一个叫callbackName的事件”，但你并没有在上层组件中监听这个事件，自然不会执行showComponent。

修复后的代码 #

父组件（修正核心逻辑）

<script setup lang="ts">
import { ref } from 'vue';

const showLoginPopup = ref(false);

function showComponent() {
  showLoginPopup.value = true;
}

// 建立事件名字符串和对应函数的映射表
const actionCallbacks = {
  showComponent
};

function emitAction(callbackName: string) {
  // 先检查函数是否存在，避免报错
  if (typeof actionCallbacks[callbackName] === 'function') {
    actionCallbacks[callbackName]();
  } else {
    console.warn(`找不到名为 ${callbackName} 的回调函数`);
  }
}
</script>
<template>
  <ActionVue 
    @emitAction="emitAction" 
    v-for="action in actions" 
    :key="action.actionType" <!-- 必须添加key，避免Vue渲染警告 -->
    :title="action.title" 
    :description="action.description" 
    :buttonTitle="action.buttonTitle" 
    :actionType="action.actionType" 
  />
</template>

子组件（无需修改，补充类型定义参考）

<script setup lang="ts">
// 确保Action类型正确定义
interface Action {
  title: string;
  description: string;
  buttonTitle: string;
  actionType: string;
}

const props = defineProps<Action>();
const emit = defineEmits<{ (event: 'emitAction', callbackName: string): void; }>();
</script>
<template>
  <button @click="emit('emitAction', props.actionType)">
    {{ props.buttonTitle }}
  </button>
</template>

修复逻辑说明 #

1. 移除了父组件中多余的defineEmits（因为你不需要向上层组件传递事件）。
2. 创建了actionCallbacks对象，把事件名字符串和对应的组件内部函数做映射，这样当子组件传来callbackName时，就能找到并执行对应的函数。
3. 在emitAction中先检查函数是否存在，避免因传入不存在的事件名导致报错。
4. 给v-for添加了:key属性，符合Vue的最佳实践，避免渲染警告。

内容的提问来源于stack exchange，提问作者Egor Konovalov