Vue2.0에서 $broadcast 및 $dispatch 재현 방법 소개

Vue1.0에서 $broadcast와$dispatch를 실현했다. 예를 들어 여러 층수로서broadcast나dispatch를 통해 지정한 구성 요소와 통신할 수 있다.
다음과 같습니다.

<componentA @dispatchFromComponentC="alert($event)">
  <componentB>
    <componentC @broadcastFromComponentA="alert($event)">
    <componentC/>
  <componentB/>
<componentA/>

componentA.vue

// componentA
$vm.broadcast("broadcastFromComponentA", "i am componentA")

componentC.vue

// componentC
$vm.dispatch("dispatchFromComponentC", "i am componentC")

어셈블리 A는 서브어셈블리 B에 이벤트를 보내고, 서브어셈블리 B는 이벤트를 감청하고 진짜로 되돌아갈 때 계속해서 손 어셈블리 C에 이벤트를 보냅니다.
반면 구성 요소 C는 부모 구성 요소 B dispatch, 부모 구성 요소 B는 이벤트를 감청하고true로 돌아간 후 할아버지 구성 요소 A dispatch 이벤트를 계속합니다.
그러나 이 두 가지 방법은 이미 Vue2.0삭제을 사용했다.this.$parent.$parent.$parent와this.$children.$children.$children 등의 작법을 피하기 위해 이번에는 Element의broadcast와dispatch 재현 방법을 소개해 주십시오.
소스 코드는 여기

function broadcast(componentName, eventName, params) {
  /*broadcastを発行するコンポーネントの下の全ての子コンポーネントをトラバースします*/
  this.$children.forEach(child => {
    /*子コンポーネント名を取得*/
    var name = child.$options.componentName;
    if (name === componentName) {
      /*当コンポーネントは指定されているコンポーネントの場合、$emitでイベントを送出する。
      (注意：指定されているコンポーネントでイベントを受け取るために、
　　　事前に$onリスナを追加するのは必要です。)*/
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      /*当コンポーネントは指定されているコンポーネントではない場合、
      broadcast関数で再帰して、当コンポーネントの下の全ての子コンポーネントをトラバースします。*/
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      /*親コンポーネント名を取得*/
      var name = parent.$options.componentName;
      while (parent && (!name || name !== componentName)) {
        /*当コンポーネントは指定されているコンポーネントではない場合、上層へ探し続きます*/
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName;
        }
      }
      /*当コンポーネントは指定されているコンポーネントの場合、$emitでイベントを送出する。
      (注意：指定されているコンポーネントでイベントを受け取るために、
　　　事前に$onリスナを追加するのは必要です。)*/
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    /*ここで、call関数で上記定義したbroadcast内部のthisを当Vueインスタンスに変更する*/
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

이상, 도움이 된다면 다행이다.