时间戳

首页 > 解决方案 > Vue.js globalEventBus 从窗口对象捕获事件？

javascript - Vue.js globalEventBus 从窗口对象捕获事件？

问题描述

我在 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',...)最好的方法来捕捉窗口事件，或者无论如何都可以这样做？

标签： javascriptvue.jsevent-handlinglistenerevent-bus

解决方案

你的方法是正确的。如果触发了一个事件，window那么您需要监听它。

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

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

这种方法还允许您为事件添加其他源，除了 window.

推荐阅读