使用MITT Emitter发送事件后无法接收的问题求助

核心问题分析 #

你的代码存在两个关键错误，导致事件无法正常传递：

1. 发送事件的方法用错：Landingpage.vue中误用emitter.on（这是绑定监听逻辑）而非emitter.emit（这才是触发/发送事件的正确方法）。
2. 通配符监听的回调参数格式错误：menu.vue中*通配符的回调函数参数不符合Mitt规范，通配符监听会返回两个参数——事件类型和传递的payload数据。

分步修复 #

1. 修正Landingpage.vue的事件发送代码

将监听方法替换为发送方法，确保触发update事件并传递this.hash：

// Landingpage.vue 正确代码
emitter.emit('update', this.hash)         
console.log('Sending data:', this.hash);

2. 修正menu.vue的事件监听代码

调整通配符监听的回调参数，正确接收事件类型和数据，也可以直接监听指定的update事件：

// menu.vue 正确代码
data() {
    return { hash: "", };
},
mounted() {
    // 方式1：通配符监听所有事件
    emitter.on('*', (type, payload) => {
        console.log(`Received event: ${type}, data:`, payload);
        if (type === 'update') {
            this.hash = payload;
        }
    });

    // 方式2：直接监听指定的update事件（更精准）
    // emitter.on('update', (hash) => {
    //     this.hash = hash;
    //     console.log('Received data:', hash);
    // });
},

3. 确保使用同一个Emitter实例

检查两个组件中引用的emitter是否为同一个实例：

• 如果是直接导入mitt.js的emitter，确保组件内的导入路径正确：import emitter from './mitt'。
• 如果使用全局注册的$mitt，组件内需要通过this.$mitt调用（setup语法糖中需用getCurrentInstance()获取实例）：

  // Landingpage.vue 全局实例写法
  this.$mitt.emit('update', this.hash)
  
  // menu.vue 全局实例写法
  this.$mitt.on('update', (hash) => {
      this.hash = hash;
  })
  

验证修复 #

修改后重新运行项目：

• Landingpage.vue中hash变化时，控制台会打印出发送的数据。
• menu.vue的控制台会输出接收到的事件数据，组件内的hash变量也会同步更新。

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