vue兄弟组件间的通信（事件总线）

一、场景描述

导航栏与地图展示区为两个兄弟组件，导航栏组件用到的所有数据都来源于地图区组件通过导航栏按钮切换，控制地图区域数据的变化

二、实现步骤

1. 首先两个组件中都引入全局事件总线

import eventBus from "@/utils/eventBus";

eventBus.js中代码：（new一个组件作为中间仓库）

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

2. 两个组件的代码

导航栏组件的代码【发送信息】

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

地图区组件绑定的代码（写在created中）

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