Vue はコンポーネント間の通信をどのように実装しますか?

// 子.vue
<テンプレート>
    <div>
        私は息子で、父から{{value}}としてデータを受け取りました
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    小道具:{
        値: 文字列
    }
}

//アプリ.vue
<テンプレート>
  <div id="アプリ">
    <子:値="x" />
  </div>
</テンプレート>

<スクリプト>
'./components/Child' から Child をインポートします。
エクスポートデフォルト{
  データ（）{
    戻る {
      x: 'こんにちは、子供'
    }
  },
  コンポーネント:{
    子供
  }
}
</スクリプト>

// 子.vue
<テンプレート>
    <div>
        私は息子で、父から{{value}}としてデータを受け取りました
        <button @click="こんにちは">
            親コンポーネントに挨拶しましょう</button>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    小道具:{
        値: 文字列
    },
    方法:{
        こんにちは（）{
            this.$emit('sayHi','こんにちは、親御さん!');
        }
    }
}
</スクリプト>

//アプリ.vue
<テンプレート>
  <div id="アプリ">
    私は親コンポーネントであり、子コンポーネントから受け取るデータは{{y}}です
    <子:value="x" @sayHi="y = $event"/>
  </div>
</テンプレート>

<スクリプト>
'./components/Child' から Child をインポートします。
エクスポートデフォルト{
  データ（）{
    戻る {
      x: 'こんにちは、子供',
      y: ''
    }
  },
  コンポーネント:{
    子供
  }
}
</スクリプト>

Vue.js の eventBus を新規作成します。
eventBus.$emit(eventName, […args]) //イベントを公開する eventBus.$on(event, callback) //イベントをサブスクライブする

// イベントバス.js
'vue' から Vue をインポートします
エクスポート const eventBus = new Vue();

//子供
<テンプレート>
    <div>
        私は息子で、父からデータを<strong>{{value}}</strong>として受け取りました
        <button @click="こんにちは">
            親コンポーネントに挨拶しましょう</button>
        <button @click="兄弟">
            兄弟コンポーネントに挨拶しましょう</button>
    </div>
</テンプレート>

<スクリプト>
'../eventBus.js' から {eventBus} をインポートします。
エクスポートデフォルト{
    小道具:{
        値: 文字列
    },
    方法:{
        こんにちは（）{
            this.$emit('sayHi','こんにちは、親御さん!');
        },
        兄弟(){
            eventBus.$emit('sibling','hi,brother');
        }
    }
}
</スクリプト>

<スタイルスコープ>
    強い{
        色: 赤;
    }
</スタイル>

//兄弟
<テンプレート>
    <div>
        私は兄弟コンポーネントであり、息子コンポーネントから受け取るデータ情報は <strong>{{x}}</strong> です。 
    </div>
</テンプレート>

<スクリプト>
'../eventBus.js' から {eventBus} をインポートします。
エクスポートデフォルト{
    データ（）{
        戻る {
            ×: ''
        }
    },
    マウントされた(){
        eventBus.$on('兄弟', (msg)=>{
            this.x = メッセージ;
        })
    }
}
</スクリプト>

<スタイルスコープ>
    強い{
            色: 緑;
    }
</スタイル>

//親
<テンプレート>
  <div id="アプリ">
    私は親コンポーネントであり、子コンポーネントから受け取るデータは <strong>{{y}}</strong> です。
    <子:value="x" @sayHi="y = $event"/>
    <兄弟></兄弟>
  </div>
</テンプレート>

<スクリプト>
'./components/Child' から Child をインポートします。
'./components/Sibling' から Sibling をインポートします。
エクスポートデフォルト{
  データ（）{
    戻る {
      x: 'こんにちは、子供',
      y: ''
    }
  },
  コンポーネント:{
    子供、
    兄弟
  }
}
</スクリプト>

<スタイルスコープ>
    強い{
            色: 青;
    }
</スタイル>

//メイン.js
'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。

Vue.config.productionTip = false

Vue.prototype.$eventBus = new Vue(); //この文を追加します。以下の新しい Vue の前にある必要があります。

新しいVue({
  レンダリング: h => h(App),
}).$mount('#app')

//子供
兄弟(){
    this.$eventBus.$emit('sibling','hi,brother');
}

//兄弟
マウントされた(){
    this.$eventBus.$on('sibling', (msg)=>{
        this.x = メッセージ;
    })
}

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。

Vue.config.productionTip = false

eventBus = new Vue() とします
Object.defineProperty(Vue.prototype,'$eventBus',{
  得る（）{
    イベントバスを返す
  }
})

新しいVue({
  レンダリング: h => h(App),
}).$mount('#app')