带有事件发射的 Vue.JS + webpack 构建问题答案

【问题标题】：Vue.JS + webpack build issue with event emission带有事件发射的 Vue.JS + webpack 构建问题
【发布时间】：2017-09-19 19:56:02
【问题描述】：

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

以下代码 sn-ps 在子组件上设置侦听器，以在发生特定 UI 更改时接收更新的 Object 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 很陌生。为什么会有不同，为什么只有第二个版本有效？

【问题讨论】：

您的问题得到解答了吗？

标签： javascript ecmascript-6 vue.js

【解决方案1】：

function(){} 和 () => {} 之间的主要区别在于 this 在函数范围内的处理方式。

使用arrow function (() => {})，this 将按词法处理；意味着它将指向包含范围。

来自上面链接的 MDN 文档，

箭头函数不会创建自己的 this 上下文，所以 this 有从封闭的上下文看它的本义

对于正则函数表达式，this 所指的内容取决于方法的调用方式。在您的情况下，它可能指的是eventBus。

再次，来自 MDN 文档，

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

这就是为什么它可以与箭头函数一起使用，但不能与常规函数一起使用，因为使用箭头函数，this 指向具有 server 属性的 Vue，而使用常规函数，它指向eventBus.

这是一个 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?

【讨论】：