Vue.js事件处理：关闭标签页时销毁对应监听器不影响其他子组件监听的问题

你遇到的问题核心是事件解绑时参数传递错误，通常出现在使用全局事件总线（EventBus/ mitt等全局事件方案）的场景：如果调用解绑方法时只传入事件名orderReceived，没有传入对应绑定的处理函数，会直接清除全局所有该事件的监听器，导致其他组件的监听同步失效。

方案1：正确配置全局事件的绑定/解绑逻辑 #

核心原则是绑定和解绑时都明确指定对应的处理函数，确保只移除当前组件的监听器：

• 绑定事件时不要使用匿名函数，要将处理函数的引用挂载到组件实例上
• 解绑时同时传入事件名+对应处理函数的引用

示例代码（Vue2/Vue3选项式API通用）：

// Tab1 组件内逻辑
export default {
  created() {
    // 将处理函数挂载到实例上，保留引用
    this.handleOrder = () => {
      // 拉取array1的业务逻辑
    }
    // 绑定全局事件
    this.$EventBus.$on('orderReceived', this.handleOrder)
  },
  // 组件销毁前解绑
  beforeDestroy() { // Vue3对应beforeUnmount钩子
    this.$EventBus.$off('orderReceived', this.handleOrder)
  }
}

Tab2组件使用独立的处理函数按同样逻辑绑定解绑即可，互不影响。

方案2：替换为父子组件原生自定义事件（更稳妥） #

如果事件仅在父子组件之间传递，不需要跨多层级通信，完全可以不用全局事件总线，直接使用Vue原生的自定义事件机制：
父组件模板中直接给子组件绑定事件：

<!-- 父组件模板 -->
<Tab1 @orderReceived="fetchArray1" v-if="tab1Open" />
<Tab2 @orderReceived="fetchArray2" v-if="tab2Open" />

父组件需要触发事件时，直接触发对应自定义事件即可。这种方式下，组件销毁时Vue会自动清理对应的事件监听器，不需要手动处理，不会出现跨组件影响的问题。

避坑提醒 #

不要在事件绑定时使用匿名函数，比如this.$EventBus.$on('orderReceived', () => { /* 逻辑 */ })，匿名函数没有可引用的地址，解绑时无法指定单个监听器，要么无法解绑，要么只能清空所有同事件名的监听器。

内容的提问来源于stack exchange，提问作者Pandurang