组合式函数中不能直接调用 emit，需由组件层通过 defineEmits 创建 emit 并传入；composable 内只负责触发事件，类型安全由组件层保障，推荐封装带 emit 的响应式逻辑，避免 provide/inject 或全局总线等反模式。

组合式函数中不能直接调用 emit

组合式函数（composable）本身没有上下文，它不知道自己运行在哪个组件里，也没有 emit 实例方法。直接在 composable 里写 emit('xxx') 会报错：ReferenceError 或类型不识别。

正确做法：由组件层传入 emit 函数

把 defineEmits 返回的 emit 函数作为参数传给组合式函数，让逻辑复用的同时保持通信可控。

• 子组件中先定义 emit，再传入 composable
• composable 内部只负责触发，不负责声明或类型约束
• 类型安全由组件层的 defineEmits 类型定义保障

示例：

useCounter.ts

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

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 设计原则

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！