统一事件入口、分类响应、避免泄漏是关键：用$on集中注册并清理监听，或通过EventBus解耦多源事件，亦可借助Pinia/Vuex状态变更统一响应，必要时在payload中标识事件来源。
一个组件要同时监听和处理多个子组件发出的不同事件，关键不是“堆监听器”，而是让监听逻辑清晰、可维护、不冲突。核心思路是：统一事件入口 + 分类响应 + 避免泄漏。
用 $on 一次性注册多个事件监听
Vue 实例的 $on 支持链式调用，可以在 mounted 中为不同事件名绑定各自处理函数：
- 每个事件名独立对应一个回调，名称必须与子组件 $emit 的第一个参数完全一致
- 推荐在 mounted 中集中注册，在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中统一清理
- 例如父组件监听两个子组件事件：
this.$on('order-submitted', this.handleOrderSubmit)
用事件总线（EventBus）解耦多源事件
当事件来源不止两个子组件（比如还有弹窗、侧边栏、表单等），直接在父组件写一堆 $on 容易混乱。这时用全局 EventBus 更合适：
- 创建一个单独的 eventBus.js，导出一个空 Vue 实例（Vue 2）或 mitt 实例（Vue 3）
- 各子组件通过 eventBus.emit('save-success', data) 发送事件
- 父组件（或其他任意组件）用 eventBus.on('save-success', handler) 监听，无需知道谁发的
- 多个事件共用同一个总线，但 handler 内部可按业务逻辑分流
用计算属性 + watch 统一响应状态变更
如果多个子组件最终都影响同一类状态（比如用户信息、权限、筛选条件），不如让它们都更新 Vuex/Pinia 中的某个 state 字段，父组件只 watch 这个字段：
- 子组件触发 action 或调用 store 方法修改共享状态
- 父组件用 watch(() => store.userInfo, ...) 或 watch(store, ['userInfo', 'permissions'], ...) 响应变化
- 避免为每个子组件定义专属事件，把“事件”语义升级为“状态变更”
监听时带命名空间或 payload 标识来源
若必须复用同一事件名（比如都叫 'data-change'），可通过 payload 明确区分来源：
- 子组件 emit 时传入标识：this.$emit('data-change', { from: 'profile-form', data: ... })
- 父组件 handler 中判断：if (payload.from === 'profile-form') { ... }
- 适合临时适配、遗留系统改造，不建议作为长期设计
