問題與事件發生在Vue eventhub

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; 
    ... 
    ... 
} 

似乎有不爲與組件的任何其他問題，但這裏是完整的組件和eventHub：

資產/ JS /組件/管理/ 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 
     } 
    } 
} 

資產/ 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); 

執行時，的callback從$on調用是一樣的東西：

this.callback(arg); 

凡arg是從傳遞$emit。