不能在 emit 中安全传递函数或特殊对象，因为跨组件通信共享 js 上下文导致闭包和 this 绑定问题、响应式系统不追踪函数、非标准对象无法序列化、违背事件“通知”而非“执行”的设计语义。
不能在 emit 中安全传递函数或特殊对象（如 Promise、RegExp、Date、Map、Set、undefined、Symbol 等）。
为什么不能传函数和特殊对象？
Vue 的事件系统基于 JavaScript 原生事件机制演化而来，其底层 emit 本质是同步调用监听器，并不涉及序列化/反序列化。但关键限制在于：
-
跨组件通信不是跨进程通信：所有组件运行在同一个 JS 执行上下文中，看似“传函数”只是传引用，但一旦该函数依赖闭包、this 绑定或外部作用域变量，父组件监听时就极易出现
undefined、this is undefined或执行环境错乱； - 响应式系统不追踪函数变化：Vue 3 的响应式依赖收集只针对 reactive 对象、ref、computed 等可代理类型，函数本身不可响应，传过去也无法触发更新；
-
非标准对象无法被 Vue 正确识别或深监听：比如
Map和Set在JSON.stringify中会丢失数据，而调试工具、DevTools、TypeScript 类型推导、甚至某些 SSR 场景都依赖可序列化的结构； -
违背事件设计语义：
emit是通知机制，不是远程过程调用（RPC）。它应表达“发生了什么”，而不是“让对方执行什么逻辑”。把函数当 payload，等于把控制权交给调用方，破坏了组件职责边界。
正确做法：用数据驱动，而非函数驱动
把“要做什么”转化为“发生了什么”，用纯数据描述状态变更或用户意图：
- ❌ 错误示例：
emit('onConfirm', () => api.submit(order)) - ✅ 正确示例：
emit('confirm', { orderId: 123, action: 'submit' })—— 父组件收到后自行决定调用哪个 API、是否加 loading、失败如何回滚 - ✅ 表单提交场景中，子组件 emit
{ values, isValid, touched }，而非handleSubmit函数 - ✅ 按钮点击事件统一 emit
'click'+ 标准化元信息：{ type: 'primary', id: 'save-btn', timestamp: Date.now() }
需要行为复用？封装成可组合逻辑，而非传函数
若多个组件需共用某段业务逻辑（如表单校验、权限检查），应抽离为 composable：
- 定义
useOrderSubmit()，内部管理 loading、错误、重试等状态； - 子组件调用
submit()触发逻辑，同时emit('submit-start')通知父组件； - 父组件监听事件做 UI 同步（如禁用按钮、显示提示），不接管具体执行。
极少数需穿透函数的场景？用 provide/inject 替代 emit
仅当深层子组件确实需要“调用父级提供的能力”（如弹窗关闭回调、编辑器保存钩子），且该能力稳定、生命周期明确时：
- 在父组件
provide({ onClose: () => emit('close') })； - 子组件
const { onClose } = inject('modalContext')，直接调用； - 注意：inject 提供的是稳定引用，比每次 emit 传函数更可控，也避免重复创建闭包。
不复杂但容易忽略：emit 的 payload 应是“事实”，不是“指令”。保持数据干净、可预测、可测试，才是长期可维护的关键。
