Vue通信 地图弹框 事件总线实现弹窗控制，解决弹窗内地图不显示问题

🔍 ：

1. Vue通信 🗣️

   

   • 父子组件：props传参 + $emit事件
   • 兄弟组件：事件总线（EventBus） / Vuex/Pinia
   • 跨层级：provide/inject

2. 地图弹框问题 🗺️

   • 现象：弹窗内地图容器未渲染（宽高为0或DOM未更新）
   • 解决：
     • 弹窗显示后调用地图的resize()方法（如高德/百度地图API）
     • 使用v-if替代v-show确保DOM重建
     • 监听弹窗打开事件，延迟初始化地图

3. 事件总线控制弹窗 🎛️

   // 创建EventBus（Vue2/Vue3均可）  
   const EventBus = new Vue();  
   // 触发弹窗打开（父组件/其他组件）  
   EventBus.$emit('open-dialog', { mapId: 'map1' });  
   // 监听弹窗事件（弹窗组件内）  
   EventBus.$on('open-dialog', (data) => {  
     this.showDialog = true;  
     this.$nextTick(() => {  
       this.initMap(data.mapId); // 确保DOM渲染完成  
     });  
   });  

4. 关键点总结 ✨

   

   • 事件总线解耦弹窗控制逻辑
   • 地图渲染时机依赖$nextTick或异步延迟
   • 弹窗组件需销毁时移除事件监听（避免内存泄漏）

💡 提示：Vue3推荐使用mitt库替代原生事件总线,更轻量！