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>

你知道为什么吗？我甚至在一个没有工作的那个内创建了一个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.']

VS

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.']

Vue Event Bus - $ on使用胖箭头功能，但不适用于传统的＆＃39;函数

1 个答案: