VueのEventHubコンポーネント受け渡し値メソッド

EventHubは非常に重要で一般的に使用されるものであり、無関係なコンポーネントの通信において非常に強力な役割を果たします。

EventHub

最上位のコンポーネントから最下位のコンポーネントにデータを渡す場合、親子転送方式のみを使用するのは非常に面倒になります。

EventHubは、この問題を解決するために使用されます。データを取得する必要があるコンポーネントにリスナーを設定すると、データが渡されるたびに、そのコンポーネントがイベントをブロードキャストし、これらのリスナーを呼び出します。EventHubには、監視とブロードキャスト、そしてもちろんリスナーの削除という2つの主要な機能があることを見つけるのは難しくありません。そして、Vueはこれらの関数を提供するだけです。Vueを使用してこれらの関数を記述することができます。

 

let eventHub = new Vue()

// 监听
eventHub.$on('eventName', (data) => {
    console.log('Trigger this event and receive ' + data)
})

// 广播
eventHub.$emit('eventName', data)

// 去掉监听
eventHub.$off('eventName')

エレガントな感じですか？実際、これは基本的にVueのイベント監視機能を使用してEventHubを完了することです。

依存性注入

エレガンスはエレガンスですが、これは明らかにグローバル変数です。エントリmain.jsで初期化する必要がありますか？それともVue.prototype直接入れthis.eventHubて使用しますか？いいえ、いいえ、Vueはより簡潔な記述方法を提供します：依存性注入。

data初期化EventHubの最上位コンポーネント、およびprovideこのEventHubの外部公開の使用。

 

import Vue from "vue";

export default {
  name: "App",
  components: {
    GrandParent
  },
  data() {
    return {
      eventHub: new Vue()
    };
  },
  provide() {
    return {
      eventHub: this.eventHub
    };
  },
  methods: {
    setRandomValue() {
      this.eventHub.$emit("update:msg", Math.random() * 100);
    }
  }
};

次に、コンポーネントはinjectこの依存関係をcreated挿入してリッスンし、内部にイベントリスナーを追加する必要があります。

 

export default {
  inject: ["eventHub"],
  data() {
    return {
      msg: ""
    };
  },
  created() {
    this.eventHub.$on("update:msg", msg => {
      this.msg = msg;
    });
  }
};

最終的な結果は、監視する必要のあるコンポーネントを変更することです。msg監視イベントを追加するサブコンポーネントは、最新のものを取得し、msgそれらを使用して独自のデータまたはステータスを更新します。