Vue3使用mitt实现事件总线报错：this.emitter is undefined

问题根源 #

你在main.js中重复调用了createApp(App)：

• 第一次调用时给实例添加了emitter全局属性，但这个实例没有被挂载
• 第二次调用创建了全新的App实例并完成挂载，这个实例并没有包含你设置的emitter属性
  因此组件内访问this.emitter自然会返回undefined。

修正后的main.js代码 #

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
// 假设你已正确导入store和router
import store from './store'
import router from './router'

const emitter = mitt()
// 只创建一次App实例，链式完成所有配置
const app = createApp(App)
app.config.globalProperties.emitter = emitter
app.use(store).use(router).mount('#app')

可选实现方案（更适配Vue3 Composition API） #

如果你使用Composition API，推荐单独封装Mitt实例，避免依赖全局属性：

1. 创建src/utils/emitter.js：

import mitt from 'mitt'
export default mitt()

2. 在组件中直接导入使用：

// 触发事件的组件
import emitter from '@/utils/emitter'

const emitFunction = () => {
  emitter.emit('hideMenu', true)
}

// 监听事件的组件
import emitter from '@/utils/emitter'
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  const handler = (state) => console.log(state)
  emitter.on('hideMenu', handler)
  // 组件卸载时移除监听，避免内存泄漏
  onUnmounted(() => {
    emitter.off('hideMenu', handler)
  })
})

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