Vue. js globalEventBus перехватывать события из оконного объекта? - PullRequest
Новая
       28

Vue. js globalEventBus перехватывать события из оконного объекта?

0 голосов
/ 07 апреля 2020

У меня есть globalEventBus в vue. js, который я могу внедрить в другие компоненты, чтобы перехватывать и реагировать на пользовательские события ... однако у меня проблема в том, что некоторые события происходят из 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',...), каков наилучший подход для этого или возможно ли это сделать в любом случае?

1 Ответ

0 голосов
/ 07 апреля 2020

Ваш подход правильный. Если событие запускается на window, вам необходимо его прослушать.

Одна вещь, которую вы можете сделать, это прослушивать события на window, а затем $emit их на глобальном EventBus.

Таким образом, вам нужно только слушать свою шину событий для обработки событий.

Этот подход также позволит вам добавлять другие источники событий, кроме окна.

...