Vue.js globalEventBus捕获来自窗口对象的事件？

Question

我在vue.js中有一个globalEventBus，可以将其注入其他组件中以捕获并响应自定义事件...但是，我遇到的问题是某些事件来自vue.js组件，而某些事件来自全局窗口对象...

globalEventBus.js:

import Vue from 'vue';
import { mapActions } from 'vuex';

export const eventBus = new Vue({
    methods: {
        ...mapActions(['handlePivotItemClick', 'handleEventButtonClick',
            'handleInputRadioChange'])
    }
});

// catch custom events from vue.js components that you have emitted yourself inside vue.js components:
eventBus.$on('nms-event-pivot-item-clicked', event => {
    console.log("Event bus ###:", event.detail);
    this.handlePivotItemClick(event);
});

eventBus.$on('nms-event-button-clicked', event => {
    console.log("Event bus ###:", event.detail);
    this.handleEventButtonClick(event);
});

eventBus.$on('nms-event-input-radio-changed', event => {
    console.log("Event bus ###:", event.detail);
});

// catch global window events, but how to register and catch them on eventBus?
window.addEventListener('nms-event-input-radio-changed', event => {
    console.log("Event Window###:", event.detail);
    this.handleInputRadioChange(event);
});

window.eventBus = eventBus;

如何使用来自组件和全局窗口对象的globalEventBus捕获两个事件？到目前为止，我只能使用window.addEventListener(...)捕获窗口事件，而不能使用eventBus.$on('eventName',...)捕获窗口事件，什么是最好的方法，或者有可能吗？

Answer 1

您的方法是正确的。如果在window上触发了事件，则需要监听该事件。

您可以做的一件事是在window上监听事件，然后在全局EventBus上监听它们。

这样，您只需要侦听事件总线即可进行事件处理。

此方法还可以让您添加窗口以外的其他事件来源。