eventHubでVueでイベントを発行する際の問題

Question

私は、その生涯のある時点でイベントを発生させる必要があるコンポーネントを持っています。このイベントは、兄弟コンポーネントによって聴かれます。

私はこの通信にイベントハブを使用しています。

eventHub.$emit('EventName')に電話するときは、Uncaught TypeErrorが届きます。

ここでは、コンソールで受信した完全なエラーです。 eventHub

importPlayers(e) { 

    eventHub.$emit('AdminAddedPlayers'); 

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

は、コンポーネントと他の問題があるように思えませんが、ここでは完全なコンポーネントと次のとおりです：ここで

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) 

は、エラーの原因となっているコードです

資産/の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.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を投げると思われます。

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

が自動的$on、コールバックに渡されます：

ドキュメントはそうのように、$emitに渡される引数があることに言及します。

したがって、次のコードは正しいです（と私の作品）：

実行

vm.$emit('AdminAddedPlayers', 1) 

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

、$onからcallbackの呼び出しがあるようなもの：argから渡され

this.callback(arg); 

$emit。