Question

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

就是这样：

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

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

此处解释了这种方法：https://alligator.io/vuejs/global-event-bus/

我希望能够收听通过EventBus发送的任何事件。如果我可以将一个侦听器绑定到所有事件，我可以使用它来记录日志或将数据提供给我的开发环境的某个系统，这将显示所有数据，因为它进入了eventBus，这将非常有用。

我是否缺少任何类型的vm.$listenToEverything()或某种方法可以使其发挥作用？

Answer 1

如果您处于ES6环境中，则可以采用以下两种方法之一。我通过评论解释。

通过继承覆盖

'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事件总线。逻辑基本相同，但是，在这种方法中，我们hijack，换句话说，monkey patch是方法，而不是直接覆盖它们。

'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()

Answer 2

VueJS的作者提供了hacky solution for listening to all events：

var oldEmit = this.compiler.emitter.emit
this.compiler.emitter.emit = function () {
    console.log('got event: ' + arguments[0])
    oldEmit.apply(this, arguments)
}

另一个解决方案（据说也适用于v1.0）：

const old_on = this.$on;
this.$on = (...args) => {
  // custom logic here like pushing to a callback array or something
  old_on.apply(this, args);
};

如何在VueJS中收听所有自定义事件？

2 个答案:

通过继承覆盖

通过劫持进行覆盖