vue不能正常工作的EventBus

我有一個Laravel（5.4）應用程序，其中包含一些Vue組件。我需要讓這些組件中的一些進行通信，所以我決定添加一個EventBus。該代碼是下面的：vue不能正常工作的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，但沒有其他事情發生，接收組件不捕捉事件。

我錯過了什麼？

來源

2017-07-07 ste

在定義Vue組件之前，您應該在app.js上創建EventBus。

Vue.use(VueResource); 

window.EventBus = new Vue(); 

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

如果使用這種方法，以後不需要導入EventBus。只需使用EventBus。$ emit和EventBus。$在任何你想要的地方！

希望它有幫助！

來源

2017-07-07 09:31:11

照你說的，但同樣的問題:( – ste

這裏工作的例子！ https://jsfiddle.net/4do5ng92/ 看起來你應該添加EventBus。$監聽你的組件的安裝（）方法一樣我做了。 –

是的！那是問題！我把它放在了created（）中，現在它正在工作！謝謝！ – ste

vue不能正常工作的EventBus

回答

相關問題