javascript - 使用 eventHub 在 Vue 中发出事件的问题

Question

我有一个组件需要在其生命周期的某个时刻发出一个事件。此事件将由同级组件监听。

我正在使用事件中心进行此通信。

但是，我在尝试调用 eventHub.$emit('EventName') 时遇到了 Uncaught TypeError。

这是控制台中收到的完整错误。

vue.js?3de6:2400 Uncaught TypeError: cbs[i].apply is not a function
at Vue$3.Vue.$emit (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:2400:16)
at Vue$3.e.(anonymous function) [as $emit] (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:6235)
at VueComponent.importPlayers (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:178:1), <anonymous>:98:64)
at Proxy.boundFn (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:130:14)
at Object.change [as fn] (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:261:1), <anonymous>:118:13)
at HTMLInputElement.eval (eval at <anonymous> (http://rounds.smaa.app:8000/js/app.js:322:1), <anonymous>:2229:16)

这是导致错误的代码:

importPlayers(e) {

    eventHub.$emit('AdminAddedPlayers');

    this.importing = true;
    this.success.import = false;
    ...
    ...
}

组件似乎没有任何其他问题，但这是完整的组件和事件中心:

assets/js/components/Admin/AdminImportPlayersComponent

<template>
<div class="component">
    <!-- removed some boilerplate markup for brevity -->

    <template v-if="! importing && ! warning.invalid_data_submitted">
        <h4>Import Players</h4>
        <div class="form-group" :class="error.import ? 'has-error' : ''">
            <input type="file" @change="importPlayers($event)" id="file" class="form-control">
            <div v-if="error.import" class="help-block danger">
                You need to select a valid excel file.
            </div>
        </div>
    </template>
</div>
</template>

<script>
import eventHub from '../../../events.js';
export default {
    data() {
        return {
            importing: false,
            error: {
                import: false,
                other: false,
            },
            warning: {
                invalid_data_submitted: false,
                invalid_fixed_data_submitted: false
            },
            success: {
                import: false
            },
            invalid_players: [],
            teams: [],
            loader_color: '#0d0394'
        }
    },
    methods: {
        importPlayers(e) {

            eventHub.$emit('AdminAddedPlayers');

            this.importing = true;
            this.success.import = false;

            var formData = new FormData();
            formData.append('players', e.target.files[0]);

            return this.$http.post('/admin/players/import', formData).then((response) => {
                if (response.data.invalid_player_data.length) {
                    this.invalid_players = response.data.invalid_player_data;
                    this.warning.invalid_data_submitted = true;
                    this.getTeams();
                } else {
                    this.success.import = true;
                }
                this.importing = false;
                this.error.import = false;
                this.error.other = false;
            }, (response) => {
                if (response.data.players) {
                    this.error.import = true;
                } else {
                    this.error.other = true;
                }
                this.importing = false;
                this.warning.invalid_data_submitted = false;
                this.success.import = false;
            });
        },
        submitFixedPlayers() {

            eventHub.$emit('AdminAddedPlayers');

            this.importing = true;

            return this.$http.post('/admin/players/import/fixed', {
                players: this.invalid_players
            }).then((response) => {
                // conditionals


            }, (response) => {
                this.importing = false;
            });
        },
        getTeams() {
            return this.$http.get('/admin/teams/fetch').then((response) => {
                // team stuff
            });
        },
        setDefaultTeams() {
            // setting default teams
        }
    }
}

Assets /js/events.js

module.exports = new Vue()

Vue源码在Vue中指向这段代码:

Vue.prototype.$emit = function (event) {
    var vm = this;
    var cbs = vm._events[event];
    if (cbs) {
        cbs = cbs.length > 1 ? toArray(cbs) : cbs;
        var args = toArray(arguments, 1);
        for (var i = 0, l = cbs.length; i < l; i++) {
          cbs[i].apply(vm, args);
        }
      }
    return vm
  };

Answer 1

解决方案

当使用 $on 监听 eventHub 发出的事件时，我发现你不能传入参数，像这样:

vm.$on('Event', this.callback(arg1));

这似乎抛出了一个 TypeError。

文档提到传递给 $emit 的任何参数，如下所示:

vm.$emit('Event', args);

将自动传递到 $on 回调中。

所以下面的代码是正确的(并且对我有用):

vm.$emit('AdminAddedPlayers', 1)

vm.$on('AdminAddedPlayers', this.callback);

执行时，从$on调用callback是这样的:

this.callback(arg);

其中arg是从$emit传入的。