如何监听 VueJS 中的所有自定义事件? [英] How to listen to all custom events in VueJS?

问题描述

在我的 VueJS 应用程序中，我有一个 Vue 实例，我将其用作在组件之间发送数据的事件总线.

In my VueJS app I have a Vue instance which I'm using as an event bus for sending data between components.

就是这样:

import Vue from 'vue';
export const EventBus = new Vue();

然后在我的组件中导入 EventBus 并使用 EventBus.$emit() 和 EventBus.$on().

Then in my components I import EventBus and use EventBus.$emit() and EventBus.$on().

这里解释了这种方法:https://alligator.io/vuejs/global-事件总线/

我希望能够监听通过 EventBus 发送的任何事件.如果我可以将一个侦听器绑定到所有事件，我可以使用它来记录日志或将数据馈送到我的开发环境的某个系统中，该系统会在进入 eventBus 时向我显示所有数据，这将非常有用.

What I'd like to be able to do is listen to any event that is sent through EventBus. If I could bind one listener to all events I could use this for logging or to feed data into some system for my development environment that would show me all data as it went into eventBus, which would be super useful.

是否有我遗漏的任何类型的 vm.$listenToEverything() 或某种使这项工作起作用的方法?

Is there any type of vm.$listenToEverything() that I'm missing or some way to make this work?

推荐答案

如果您处于 ES6 环境中，您可以采用以下任一方法.我通过评论解释.

If you're in an ES6 context, you could take either of below approaches. I explain through comments.

'use strict'

import Vue from 'vue'

export class EventBus extends Vue {
  // Register a custom callback as meddler that gets called upon each event emission.
  // It can be bound to $on as well. 
  $meddle (callback) {
    this.meddler = callback
  }

  // Override Vue's $emit to call the custom meddler callback upon each event emission.
  $emit (event, ...args) {
    if (this.meddler && typeof this.meddler.call === 'function') {
      this.meddler(event, ...args)
    }

    return super.$emit(event, ...args)
  }

  // We can also override $on() to listen to callbacks being registered.
}

export default new EventBus()

通过劫持覆盖

或者使用 劫持" 工厂类，以防您不想包装 Vue 事件总线.逻辑基本相同，但是，在这种方法中，我们劫持，或者换句话说, monkey patch 方法，而不是直接覆盖它们.

Override through hijacking

Or using a "hijacking" factory class in case you don't want your Vue event bus to be wrapped. The logic is basically the same, however, in this approach we hijack, or in other words, monkey patch the methods instead of overriding them directly.

'use strict'

import Vue from 'vue'

class EventBusFactory {
  static create () {
    return this.hijack(new Vue())
  }

  static hijack (bus) {
    bus.$meddle = callback => {
      bus.meddler = callback
    }

    const orig$emit = bus.$emit
    bus.$emit = (event, ...args) => {
      if (bus.meddler && typeof bus.meddler.call === 'function') {
        bus.meddler(event, ...args)
      }

      orig$emit.call(bus, event, ...args)
    }

    return bus
  }
}

export default EventBusFactory.create()

这篇关于如何监听 VueJS 中的所有自定义事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！