Communication between vue sibling components (event bus)

1. Scenario Description

The navigation bar and the map display area are two sibling components. All the data used by the navigation bar component comes from the map area component. Switch through the navigation bar button to control the change of the map area data.

2. Implementation steps

1. First, the global event bus is introduced into both components

import eventBus from "@/utils/eventBus";

Code in eventBus.js: (a new component is used as an intermediate warehouse)

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

2. The code of the two components

The code of the navigation bar component [send information]

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

The code bound to the map area component (written in created)

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