Vue 事件总线 - $on 适用于粗箭头功能，但不适用于“传统”功能

Question

我在弄清楚为什么我无法让事件总线侦听器更新我的一个组件时遇到了很多麻烦。

下面，在我的一个组件文件中，当使用接受外部 server 参数的传统函数时，我的 server 数据属性不会得到正确更新：

<template>
    <div class="col-xs-12 col-sm-6">
        <p v-if="!server">Please select a server</p>
        <p v-else>Server #{{ server.id }} selected, Status: {{ server.status }}</p>
    </div>
</template>

<script>
    import { serverBus } from '../../main.js';

    export default {
        data: function() {
            return {
                server: null
            }
        },
        created() {
            /* DOESNT WORK */
            serverBus.$on('serverSelected', function(server) {
                this.server = server;
            });
        }
    }
</script>

但是，一旦我将serverBus.$on 更改为接受粗箭头作为其接收服务器的参数，它就会起作用，并且在服务器不再为空后<p v-else> 会被正确触发。

<template>
    <div class="col-xs-12 col-sm-6">
        <p v-if="!server">Please select a server</p>
        <p v-else>Server #{{ server.id }} selected, Status: {{ server.status }}</p>
    </div>
</template>

<script>
    import { serverBus } from '../../main.js';

    export default {
        data: function() {
            return {
                server: null
            }
        },
        created() {
            /* WORKS */
            serverBus.$on('serverSelected', (server) => {
                this.server = server;
            });
        }
    }
</script>

你知道这是为什么吗？我什至在 created() 里面做了一个 console.log 里面没有工作，服务器信息被正确记录了...... <p v-else> 只是没有响应数据 server 属性没有不再为空。

这是我的$emit 部分，如果有帮助的话：

<script>
    import { serverBus } from '../../main.js';

    export default {
        props: ['server'],
        methods: {
            serverSelected() {
                serverBus.$emit('serverSelected', this.server);
            }
        }
    }
</script>

Answer 1

正如@RoyJ 所说，箭头函数是匿名的并且改变了this 在函数中的绑定方式。使用 es5 语法 function 为 this 创建一个新上下文。

考虑以下几点：

var obj = {
  user: 'John',
  roles: ['Admin', 'Manager'],
  displayUserRoles: function () {
    return this.roles.map(function (role) { // es5 function
      return this.user + ' is a ' + role + '.'
    })
  }
}

obj.displayUserRoles()
// output would be
['undefined is a Admin.', 'undefined is a Manager.']

对比：

var obj = {
  user: 'John',
  roles: ['Admin', 'Manager'],
  displayUserRoles: function () {
    return this.roles.map(role => {  // es6 arrow function
      return this.user + ' is a ' + role + '.'
    })
  }
}

obj.displayUserRoles()
// output would be
['John is a Admin.', 'John is a Manager.']