Laravel-Vue项目中EventBus调用组件方法失败问题求助

这个问题我之前开发Vue项目时也碰到过，核心原因是回调函数里的this指向不对，咱们一步步来解决：

首先看你ItemList.vue里的这段监听代码：

EventBus.$on('items-updated', function () {
    this.getItems();
});

这里用了普通的function作为回调，此时函数内部的this指向的是EventBus实例，而不是你的ItemList组件实例，自然就找不到getItems方法了。

下面提供三种简单有效的解决办法：

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

箭头函数不会绑定自己的this，会直接继承外层上下文的this（也就是你的组件实例），修改后代码如下：

mounted() {
    this.getItems();
    EventBus.$on('items-updated', () => {
        this.getItems();
    });
}

方法二：提前保存组件的this到变量 #

在回调函数外面把组件的this存成一个变量（比如self或者vm），然后在回调里用这个变量调用方法：

mounted() {
    this.getItems();
    const self = this;
    EventBus.$on('items-updated', function () {
        self.getItems();
    });
}

方法三：用bind绑定this #

通过bind方法手动把回调函数的this绑定为组件实例：

mounted() {
    this.getItems();
    EventBus.$on('items-updated', function () {
        this.getItems();
    }.bind(this));
}

额外小建议 #

Vue 2里EventBus确实能解决简单的组件通信，但如果项目复杂度逐渐提升，官方更推荐使用Vuex（Vue 2）或Pinia（Vue 3）来做状态管理，能避免EventBus容易出现的事件监听遗漏、调试困难等问题。不过当前场景下，上面的方法已经完全够用啦。

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