在 Vue 3 Composition API 下，无法直接通过 this[$event]() 调用命名函数；需将方法显式组织为可索引对象，并在模板中安全调用，兼顾动态性与类型安全。
在 vue 3 composition api 下，无法直接通过 `this[$event]()` 调用命名函数；需将方法显式组织为可索引对象，并在模板中安全调用，兼顾动态性与类型安全。
在 Vue 3 中，当子组件通过 emit 发送一个表示函数名的字符串（如 'nextStep'、'closeStep'）作为事件载荷时，父组件不能像 Options API 那样依赖 this[methodName]() 动态执行方法——因为 Composition API 中 setup() 返回的上下文不提供 this 绑定，且模板中 $event 是纯字符串，不可直接调用。
✅ 正确做法是：将所有可被动态触发的方法统一收口到一个普通对象中，使其支持以字符串为键的属性访问和调用。这既保持了 Composition API 的响应式逻辑清晰性，又避免了 eval 或 Function 构造函数等不安全操作。
✅ 推荐实现方式（Composition API）
<script setup>
import { ref } from 'vue'
// 定义业务逻辑方法（保持独立可复用）
const nextStep = () => {
console.log('→ 进入下一步')
// 实际业务：更新 stepIndex、提交表单等
}
const closeStep = () => {
console.log('× 关闭当前步骤')
// 实际业务：关闭弹窗、重置状态等
}
const previousStep = () => {
console.log('← 返回上一步')
// 实际业务：stepIndex--
}
// ✅ 关键：创建可索引的方法映射对象
const dynamicMethods = {
nextStep,
closeStep,
previousStep
}
// （可选）解构导出，便于其他地方直接调用
// const { nextStep, closeStep, previousStep } = dynamicMethods
// 示例按钮配置（供 ButtonBar 使用）
const buttons = [
{ label: '上一步', clickFunction: 'previousStep', position: 'left' },
{ label: '关闭', clickFunction: 'closeStep', position: 'center' },
{ label: '下一步', clickFunction: 'nextStep', position: 'right' }
]
</script>
<template>
<!-- 父组件监听 buttonClick 事件，并通过 dynamicMethods[$event]() 安全调用 -->
<ButtonBar
:buttons="buttons"
@buttonClick="dynamicMethods[$event]?.()"
/>
</template>? 模板中关键语法说明
- @buttonClick="dynamicMethods[$event]?.()"
使用可选链 ?.() 是重要防护：若 $event 值（如 'invalidMethod'）不在 dynamicMethods 中，不会抛出 TypeError，而是静默忽略——提升健壮性。 - ❌ 避免 @buttonClick="$event()"（$event 是字符串，非函数）
- ❌ 避免 @buttonClick="this[$event]()"（this 在 setup 模板中不可用，且无类型提示）
⚠️ 注意事项与最佳实践
-
类型安全增强（TypeScript 推荐）：
显式定义方法名联合类型，防止拼写错误：type ValidMethod = 'nextStep' | 'closeStep' | 'previousStep' const dynamicMethods: Record<ValidMethod, () => void> = { /* ... */ } - 副作用隔离：所有方法应保持“无副作用”或明确管理状态变更，避免在 dynamicMethods 中混入 ref 或 computed 的直接赋值。
- 性能无关：对象属性访问是 O(1)，无需担心性能损耗；相比 eval 或 Function，此方案完全静态、可 Tree-shaking、支持 IDE 自动补全与跳转。
- 扩展性友好：新增按钮只需在 buttons 数组中添加 clickFunction: 'newAction'，并在 dynamicMethods 中补充对应函数即可。
✅ 总结
动态调用的本质不是“绕过 Composition API”，而是主动建模行为契约：将「字符串标识 → 可执行逻辑」的关系显式声明为一个受控对象。这种方式比隐式 this 查找更清晰、更可测试、更易维护，也完全符合 Vue 3 的设计哲学——显式优于隐式，组合优于继承。
