在Vue2中使用Mitt替代this.$root.$on/$off时不生效如何解决？

核心问题：事件解绑和绑定的回调函数引用不一致 #

你在emitter.on和emitter.off里分别定义了两个独立的匿名箭头函数，虽然逻辑完全相同，但在JS中属于不同的引用对象，mitt的off方法无法匹配到之前注册的回调，会导致两类异常：

• 组件重复挂载销毁时会出现事件被重复绑定的问题
• 旧回调残留会覆盖正常逻辑，导致事件触发行为不符合预期

其他需要排查的点 #

• 确认所有组件引入的emitter是同一个全局实例，正确初始化方式如下：

// 单独的eventBus.js文件
import mitt from 'mitt'
export const emitter = mitt()
// 所有组件都从该文件引入emitter，不要每次单独初始化新的mitt实例

• 确认组件二的handleClick方法被正常触发，可以在方法内加日志确认this.item.id是有效值

修复代码示例 #

// 组件一修复后代码
mounted() {
  // 直接绑定methods里的方法引用，不要包裹多余的匿名函数
  emitter.on('doThis', this.doThis);
}
beforeDestroy() { // 也可以用destroyed钩子，beforeDestroy内解绑更稳妥
  emitter.off('doThis', this.doThis)
}
methods: {
  doThis(id) {
    console.log(id)
  }
}

如果确实需要在绑定时添加额外处理逻辑，可以把回调存到当前实例属性上，保证绑定时和解绑时使用的是同一个引用：

mounted() {
  this.doThisHandler = (id) => {
    // 可添加自定义逻辑
    this.doThis(id)
  }
  emitter.on('doThis', this.doThisHandler);
}
beforeDestroy() {
  emitter.off('doThis', this.doThisHandler)
}

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