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

希望它有所帮助！

EventBus在vue中无法正常工作

1 个答案: