VueJ에서 모든 사용자 지정 이벤트를 청취하는 방법

VueJ에서 모든 사용자 지정 이벤트를 청취하는 방법

VueJS 앱에는 컴포넌트 간에 데이터를 전송하기 위한 이벤트버스로 사용하는 Vue 인스턴스가 있습니다.

단지 다음과 같습니다.

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

그런 다음 컴포넌트에서 EventBus를 Import하여 사용합니다.EventBus.$emit()그리고.EventBus.$on().

이 어프로치에 대해서는, https://alligator.io/vuejs/global-event-bus/ 를 참조해 주세요.

제가 할 수 있는 것은 EventBus를 통해 전송되는 모든 이벤트를 듣는 것입니다.하나의 청취자를 모든 이벤트에 바인드할 수 있다면 이를 사용하여 로깅을 하거나 개발 환경의 시스템에 데이터를 공급하여 eventBus에 들어갈 때 모든 데이터를 표시할 수 있으므로 매우 유용합니다.

어떤 타입이 있나요?vm.$listenToEverything()내가 뭘 놓쳤는지, 아니면 이 일을 해결할 방법이 있는지요?

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 이벤트 버스를 포장하고 싶지 않은 경우 "hijacking" 팩토리 클래스를 사용합니다.논리는 기본적으로 동일하지만, 이 접근법에서 우리는 방법을 직접 재정의하지 않고 탈취하거나, 다시 말해, 방법을 수정하는 것이다.

'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의 저자는 모든 이벤트를 듣기 위한 해킹 솔루션을 제공했습니다.

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);
};

언급URL : https://stackoverflow.com/questions/43947747/how-to-listen-to-all-custom-events-in-vuejs