Vue跨组件通过$root触发事件调用方法时出现TypeError错误排查

看起来你在使用Vue的$root进行跨组件事件通信时，遇到了回调函数中this指向异常的问题，导致无法调用组件内的方法。我来帮你分析下原因并给出修复方案：

问题根源 #

你收到的[Vue warn]: Error in event handler for "trade_as_event": "TypeError: this.createQuoteConfig is not a function"错误，本质是因为你在$on的回调里使用了普通的function，它改变了this的指向。在普通函数中，this会绑定到触发事件时的上下文（这里是$root），而不是New.vue组件的实例，所以自然找不到组件里定义的createQuoteConfig方法。

两种修复方案 #

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

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是New.vue组件的实例）。修改你的mounted钩子代码如下：

mounted: function(){ 
  this.$root.$on('trade_as_event', (data) => { 
    this.tradeAsAccount = data 
    console.log(this.tradeAsAccount) 
    this.createQuoteConfig() // 现在能正确调用组件方法了
  }) 
},

方案二：提前保存组件实例的引用 #

如果你的项目还在使用不支持ES6的环境，可以在回调函数外部先把组件的this存为一个变量，比如vm，然后在回调里用这个变量访问组件的属性和方法：

mounted: function(){ 
  const vm = this; // 保存组件实例的引用
  this.$root.$on('trade_as_event', function(data) { 
    vm.tradeAsAccount = data 
    console.log(vm.tradeAsAccount) 
    vm.createQuoteConfig() // 通过vm访问组件方法
  }) 
},

额外优化建议 #

为了避免内存泄漏，记得在组件销毁时移除对应的事件监听。在New.vue里添加一个beforeDestroy钩子：

beforeDestroy() {
  this.$root.$off('trade_as_event'); // 移除事件监听
}

这样当组件被销毁时，就不会再保留对这个事件的监听，防止不必要的资源占用。

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