Eventue in vueが動作しない

Question

私はいくつかのVueコンポーネントを含むLaravel（5.4）アプリケーションを持っています。これらのコンポーネントのいくつかを通信させる必要があるので、私はEventBusを追加することに決めました。

app.js：

import VueResource from "vue-resource"; 
import Vue from "vue"; 
import Menu from "components/src/core/Menu.vue"; 

import MapWrapper from "./components/MapWrapper.vue"; 
import PaymentModal from "./components/PaymentModal.vue"; 

require("../sass/app.scss"); 

Vue.use(VueResource); 

Vue.component("map-wrapper", MapWrapper); 
Vue.component("my-menu", Menu); 
Vue.component("payment-modal", PaymentModal); 

// eslint-disable-next-line 
new Vue({ 
    el: "#app", 
}); 

event.js：

<template> 
    <div style="height: 100%; width: 100%;"> 
     <button @click="emitEvent">Click me</button> 
    </div> 
</template> 

<script> 
import Vue from "vue";  
import EventBus from "../event"; 

export default { 
    methods: { 
     emitEvent() { 
      console.log(EventBus); 
      EventBus.$emit("testEvent", "test"); 
     }, 
    }, 
}; 
</script> 
<style> 
</style> 

成分受信しなければならない：イベントをトリガする

import Vue from "vue"; 

const EventBus = new Vue(); 

export default EventBus; 

成分コードは以下の通りでありますイベント：

<template> 
    <div> 
    </div> 
</template> 

<script> 
import EventBus from "../event"; 

export default { 
    computed: { 
     test() { 
      EventBus.$on("testEvent", ($event) => { 
       console.log("event triggered", $event); 
      }); 
     }, 
    }, 
}; 
</script> 

<style> 
</style> 

問題は、ボタンをクリックすると、コンソールで記録されたEventBusが表示されますが、何も起こらないということです。受信コンポーネントはイベントを捕捉しません。

私には何が欠けていますか？

Answer 1

Vueコンポーネントを定義する前に、app.jsでEventBusを作成する必要があります。

Vue.use(VueResource); 

window.EventBus = new Vue(); 

Vue.component("map-wrapper", MapWrapper); 

この方法を使用する場合、EventBusを後でインポートする必要はありません。 EventBusを使用するだけで$ emitとEventBus。$あなたはどこでも！

希望すると助かります！