Vue：通过EventBus通信时监听事件的this指向异常问题

嘿，这个问题我之前也踩过坑！你碰到的核心问题是EventBus的回调函数里this没有指向组件实例，再加上代码里还有几个小语法错误，导致没法正常更新list数组。我给你拆解下解决方案：

问题根源 #

1. 用普通函数作为回调时，this会指向EventBus实例而非你的组件实例；
2. 你的other-component.vue里存在语法错误：data()被误写在了mounted()函数内部，events.$on的事件名引号没闭合，还有methods()的写法不符合Vue规范（应该是methods: {}对象形式）。

解决方案 #

方法1：使用箭头函数（最推荐） #

箭头函数会自动继承外层作用域的this，直接用箭头函数作为回调，this就会指向组件实例：

修正后的other-component.vue代码：

import events from './events'
export default {
  // data要和mounted同级，不能写在mounted里面
  data() {
    return {
      list: []
    }
  },
  mounted() {
    // 注意闭合事件名的引号，用箭头函数
    events.$on('form-submitted', (data) => {
      this.list.push(data);
    })
  }
}

同时别忘了修正form-component.vue里的小问题：

import events from './events'
export default {
  // 正确的methods写法是对象，不是函数
  methods: {
    // 拼写修正：submitForm（原代码是sumbitForm）
    submitForm() {
      events.$emit('form-submitted', data)
    }
  }
}

方法2：提前保存this到变量 #

如果习惯用普通函数，可以提前把组件的this存成变量（比如that），在回调里用这个变量访问组件实例：

import events from './events'
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    const that = this;
    events.$on('form-submitted', function(data) {
      that.list.push(data);
    })
  }
}

方法3：用bind()绑定this #

给回调函数手动绑定组件的this，强制改变它的指向：

import events from './events'
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    events.$on('form-submitted', function(data) {
      this.list.push(data);
    }.bind(this))
  }
}

额外提醒 #

• 记得在组件销毁时移除EventBus监听，避免内存泄漏：

beforeUnmount() {
  events.$off('form-submitted')
}

• 如果是Vue 3项目，官方已经移除了EventBus的支持，建议用mitt库来实现类似的组件通信功能哦～

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