Vue中的EventBus不起作用

Question

我有一个 Laravel (5.4) 应用程序，其中包含一些 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：

import Vue from "vue";

const EventBus = new Vue();

export default EventBus;

应该触发事件的组件：

<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>

应该接收事件的组件：

<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.$！

希望对你有帮助！