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生成事件發佈問題

回答

相關問題