Vue.JS + webpack生成事件发布问题

在Vue.js中使用eventBus模式允许中心位置发出事件，以便订阅监听组件可以处理此类事件。Vue.JS + webpack生成事件发布问题

下面的代码片段设置了子组件上的侦听器，以在发生特定的UI更改时接收更新的对象server。

我今天遇到了一些地方在一个子组件这个我以前不工作：

created: function() { 
     eventBus.$on('serverSelected', function(server) { 
      console.log('serverDetails, server=' + server.toString()); 
      this.server = server; 
    }); 
},

但这并工作：

created: function() { 
     eventBus.$on('serverSelected', (server) => { 
      console.log('serverDetails, server=' + server.toString()); 
      this.server = server; 
    }); 
},

我认为唯一的不同是对的ES6语法回电话。但是，香草JS仍然应该正确吗？

我对JS很陌生。为什么会有不同，为什么只有第二个版本有效？

来源

2017-04-23 lollercoaster

得到的回答你的问题？ – Bert

function(){}和() => {}之间的一个主要区别恰恰就是this将在函数的范围内被处理。

随着arrow function（() => {}），this将词法处理;这意味着它将指向包含范围。

从上面链接的MDN文档，

箭头功能不会创建自己的这一背景下，所以这从封闭的上下文

了原有的意义与普通函数表达式，this所指的取决于如何调用该方法。在你的情况下，它可能指的是eventBus。

再次，从MDN文档，

直到箭头的功能，每一个新的函数来定义其自己的这个值（在构造的情况下，一个新的对象，未定义在严格模式函数调用，该上下文对象（如果函数被调用为“对象方法”等）。

这就是为什么它用箭头功能的作品，但与常规的功能，因为用箭头功能，this点到具有server财产，并与常规的功能，它指向eventBus的Vue公司。

这是一个example显示不同之处。弹出打开控制台查看不同的消息。

如果您想继续使用常规功能，则需要适当地绑定this。一种方法是使用bind。

created: function() { 
     eventBus.$on('serverSelected', function(server) { 
      console.log('serverDetails, server=' + server.toString()); 
      this.server = server; 
    }.bind(this)); 
},

或者你可以使用闭包。

created: function() { 
     const self = this 
     eventBus.$on('serverSelected', function(server) { 
      console.log('serverDetails, server=' + server.toString()); 
      self.server = server; 
    }); 
},

参见，How to access the correct this inside a callback?

来源

2017-04-23 00:26:11 Bert

Vue.JS + webpack生成事件发布问题

回答

相关问题