1. Descripción del escenario
La barra de navegación y el área de visualización del mapa son dos componentes hermanos. Todos los datos utilizados por el componente de la barra de navegación provienen del componente del área del mapa. Cambie el botón de la barra de navegación para controlar el cambio de los datos del área del mapa.
2. Pasos de implementación
1. Primero, el bus de eventos global se introduce en ambos componentes.
import eventBus from "@/utils/eventBus";
Código en eventBus.js: (se utiliza un nuevo componente como almacén intermedio)
import Vue from 'vue'
export default new Vue()
2. El código de los dos componentes.
El código del componente de la barra de navegación [enviar información]
handleClick() {
eventBus.$emit ('一个相同的名字', ' parameter')
}
El código vinculado al componente del área del mapa (escrito en created)
created() {
eventBus.$on("一个相同的名字", (parameter) => {
// 写入所用到的事件，例如加载地图、改变图表
this.currentLayer = " parameter "; //来自地图区域数据来源区所用到的参数
this.loadMapData();
…
});