Cannot read properties of undefined (reading '$on)

1. 错误信息

Vue3 中使用 $on 触发事件报错，错误信息如下

2. 改正前

简单看下我的组件做的(错)事

// ListDemo.vue
import event from './event'

methods: {
  addItem(title) {
    console.log("兄弟组件之间使用自定义组件", title);
  }
},
mounted() {
  // 绑定自定义事件     这里使用函数名，而不是直接()=>{}是因为方便解绑
  event.$on("addItem", this.addItem);
},
beforeUnmount() {
  // 及时销毁，否则可能造成内存泄露
  event.$off("addItem", this.addItem);
}

// InputDemo.vue
import event from "./event";

  methods: {
    addItem() {
      event.$emit("addItem", this.title);
    }
  }
</script>

3. 错误分析

因为最开始是引入一个新的 Vue 实例，所以最初没有看到 deprecated 的信息，后来直接 this.$on 才想起来它在 Vue3 中已经被废弃了

打开链接 eslint.vuejs.org/rules/no-de… 可以看到它提示我们引入 mitt ，然后根据它的提示改完就好啦。

当然，还得要导入依赖，并且将 mitt 作为单独的文件暴露出事件总线对象

npm i mitt -s

这里有一个 mitt库(事件总线) 的使用，还是挺详细滴

这篇好文章是转载于：学新通技术网