Vue のディスパッチとブロードキャストの自己実装の詳細説明 (ディスパッチとブロードキャスト)

関数ブロードキャスト(コンポーネント名、イベント名、パラメータ) {
 this.$children.forEach(child => {
  定数名 = 子.$options.name;

  if (名前 === コンポーネント名) {
   child.$emit.apply(child, [イベント名].concat(params));
  } それ以外 {
   // todo paramsが空の配列の場合、undefinedが返されます
   ブロードキャスト.apply(child、[コンポーネント名、イベント名].concat([パラメータ]));
  }
 });
}
エクスポートデフォルト{
 メソッド: {
  ディスパッチ(コンポーネント名、イベント名、パラメータ) {
   親を this.$parent || this.$root とします。
   name = parent.$options.name とします。

   while (親 && (!名前 || 名前 !== コンポーネント名)) {
    親 = 親.$parent;

    （親）の場合{
     名前 = 親.$options.name;
    }
   }
   （親）の場合{
    親.$emit.apply(親、[イベント名].concat(params));
   }
  },
  ブロードキャスト(コンポーネント名、イベント名、パラメータ) {
   ブロードキャスト.call(this、コンポーネント名、イベント名、パラメーター);
  }
 }
};

<テンプレート>
 <div>
  <h1>私は親コンポーネントです</h1>
  <button @click="handleClick">イベントをトリガー</button> <child />
 </div>
</テンプレート>
<スクリプト>
「@/mixins/emitter.js」からエミッターをインポートします。
「./child」から子をインポートします。
エクスポートデフォルト{
 名前: "コンポーネントA",
 ミックスイン: [エミッター],
 作成された() {
  this.$on("child-to-p", this.handleChild);
 },
 メソッド: {
  ハンドルクリック() {
   this.broadcast("componentB", "on-message", "Hello Vue.js");
  },
  ハンドルChild(val) {
   アラート(val);
  }
 },
 コンポーネント:
  子供
 }
};
</スクリプト>

<テンプレート>
 <div>私は子コンポーネントです</div>
</テンプレート>
<スクリプト>
「@/mixins/emitter.js」からエミッターをインポートします。
エクスポートデフォルト{
 名前: "コンポーネントB",
 ミックスイン: [エミッター],
 作成された() {
  this.$on("on-message", this.showMessage);
  this.dispatch("componentA", "child-to-p", "hello parent");
 },
 メソッド: {
  メッセージを表示(テキスト) {
   ウィンドウのアラート(テキスト);
  }
 }
};
</スクリプト>