☰

Communication between sibling components in Vue.js 2.0 Ask Question

tag-icon • tag-icon javascript vue.js vuejs2 vue-component vuex
Communication between sibling components in Vue.js 2.0 Ask Question

Overview

In Vue.js 2.x, model.sync will be deprecated.

So, what is a proper way to communicate between sibling components in Vue.js 2.x?

Background

私が理解しているVue.js 2.xでは、兄弟通信に推奨される方法は店舗やイベントバスを利用することです。

によるとエヴァン(Vue.js の作成者):

また、「コンポーネント間でデータを渡す」というのは、最終的にはデータ フローが追跡できなくなり、デバッグが非常に困難になるため、一般的には悪い考えであることも言及する価値があります。

複数のコンポーネントでデータを共有する必要がある場合は、グローバルストアまたはヴュークス。

[ディスカッションへのリンク]

そして：

.onceおよび.sync非推奨です。Props は常に一方向ダウンになりました。親スコープで副作用を生成するには、コンポーネントはemit暗黙的なバインディングに頼るのではなく、イベントを明示的に生成する必要があります。

それで、エヴァンは提案する$emit()および を使用します$on()。

懸念事項

私が心配しているのは、

  • それぞれstoreがeventグローバルな可視性を持っています (間違っていたら訂正してください)。
  • 些細な通信ごとに新しいストアを作成するのは無駄が多すぎます。

私が望んでいるのは範囲 eventsまたはstores兄弟コンポーネントの可視性。(あるいは、上記のアイデアを理解していなかったのかもしれません。)

質問

では、兄弟コンポーネント間で通信する正しい方法は何でしょうか?

ベストアンサー1

さらに短くして、根 Vueインスタンスをグローバル イベント ハブとして設定します。

コンポーネント 1:

this.$root.$emit('eventing', data);

コンポーネント2:

mounted() {
    this.$root.$on('eventing', data => {
        console.log(data);
    });
}

おすすめ記事