组合式函数中不能直接调用 emit，需由组件层通过 defineEmits 创建 emit 并传入；composable 内只负责触发事件，类型安全由组件层保障，推荐封装带 emit 的响应式逻辑，避免 provide/inject 或全局总线等反模式。
组合式函数中不能直接调用 emit
组合式函数（composable）本身没有上下文，它不知道自己运行在哪个组件里，也没有 emit 实例方法。直接在 composable 里写 emit('xxx') 会报错：ReferenceError 或类型不识别。
正确做法：由组件层传入 emit 函数
把 defineEmits 返回的 emit 函数作为参数传给组合式函数，让逻辑复用的同时保持通信可控。
- 子组件中先定义
emit，再传入 composable - composable 内部只负责触发，不负责声明或类型约束
- 类型安全由组件层的
defineEmits类型定义保障
示例：
useCounter.ts
立即学习“前端免费学习笔记（深入）”；
export function useCounter(emit: (event: 'increment' | 'reset', value?: number) => void) {<br> const count = ref(0)<br> const increment = () => {<br> count.value++<br> emit('increment', count.value)<br> }<br> const reset = () => {<br> count.value = 0<br> emit('reset')<br> }<br> return { count, increment, reset }<br>}
Counter.vue
<script setup lang="ts"><br>import { useCounter } from './useCounter'<br>const emit = defineEmits<{<br> (e: 'increment', value: number): void<br> (e: 'reset'): void<br>}>()<br>const { count, increment, reset } = useCounter(emit)<br></script>
进阶：封装带 emit 的响应式逻辑（推荐模式）
当多个事件需要统一处理（如防抖、校验、日志），可在 composable 中接收 emit 并封装一层调用逻辑，但依然不越权声明事件类型。
- 避免在 composable 中硬编码事件名，保持可配置性
- 可接受事件映射对象，让调用方决定哪些事件走哪条路径
- 适合封装表单提交、搜索触发、状态切换等通用交互流
不建议的替代方案
以下方式看似“省事”，但在大型项目中会带来维护风险：
- 用
provide/inject注入 emit —— 破坏父子通信契约，调试困难 - 用全局事件总线（mitt / tiny-emitter）—— 失去 TypeScript 类型提示和模板事件追踪
- 在 composable 中调用
getCurrentInstance()?.proxy?.$emit—— Vue 3.4+ 已弃用，且破坏 Composition API 设计原则
