質問

概要

Vue.js 2.xでは。 model.sync は非推奨となります。 .

で兄弟コンポーネント間で通信するための適切な方法は何でしょうか？ Vue.js 2.x ?

背景

Vue.js 2.xの理解では、兄弟間のコミュニケーションに望ましい方法として は、ストアまたはイベントバスを使用する .

によると エヴァン (Vue.jsの作者)です。

また、コンポーネント間でデータを受け渡しするのは、以下のようになります。 というのも、最終的にデータの流れが変わってしまうからです。 追跡不可能で、デバッグが非常に困難です。

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

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

そして

.once と .sync は非推奨です。小道具は常に一方通行になりました。このため 親スコープで副作用を発生させるには、コンポーネントが 明示的に emit を暗黙のバインディングに頼らず、イベントとして扱います。

だから エヴァンの提案 を使って $emit() と $on() .

懸念事項

心配なのは

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

私が欲しいのは、いくつかの スコープ events または stores を兄弟コンポーネントに対して可視化します。(あるいは、私が上記の考えを理解していなかったのかもしれません)。

質問

では、兄弟コンポーネント間の通信はどのように行うのが正しいのでしょうか？

どのように解決するのですか？

Vue.js 2.0では、デモのようにeventHubのメカニズムを使っています。 ドキュメントにある .

1. 集中型イベントハブを定義する。

    const eventHub = new Vue() // Single event hub
   
    // Distribute to components using global mixin
    Vue.mixin({
        data: function () {
            return {
                eventHub: eventHub
            }
        }
    })
   
   

2. これで、あなたのコンポーネントでは、次のようにイベントを発行できます。

    this.eventHub.$emit('update', data)
   
   

3. そして、あなたがすることを聞くために

    this.eventHub.$on('update', data => {
    // do your thing
    })
   
   

更新情報

ご覧ください alexの回答 よりシンプルな解決策を説明しています。