vue 兄弟コンポーネント間の通信 (イベント バス)

1. シナリオの説明

ナビゲーション バーとマップ表示領域は 2 つの兄弟コンポーネントです。ナビゲーション バー コンポーネントで使用されるすべてのデータは、マップ エリア コンポーネントから取得されます。マップ エリア データの変更を制御するには、ナビゲーション バー ボタンを使用して切り替えます。

2. 導入手順

1. まず、グローバル イベント バスが両方のコンポーネントに導入されます。

import eventBus from "@/utils/eventBus";

eventBus.js のコード: (新しいコンポーネントが中間ウェアハウスとして使用されます)

import Vue from 'vue'
export default new Vue()

2. 2 つのコンポーネントのコード

ナビゲーションバーコンポーネント[情報送信]のコード

handleClick() {
    
    
eventBus.$emit ('一个相同的名字', ' parameter')
}

マップエリアコンポーネントにバインドされたコード（作成時に記述）

created() {
    
    
eventBus.$on("一个相同的名字", (parameter) => {
    
    
// 写入所用到的事件，例如加载地图、改变图表
this.currentLayer = " parameter "; //来自地图区域数据来源区所用到的参数
this.loadMapData();
…
    });