在npm Vue单页面的环境下，兄弟组件之间通信Bus

最新推荐文章于 2023-12-17 20:24:23 发布

weixin_30791095

最新推荐文章于 2023-12-17 20:24:23 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yingyigongzi/p/10838059.html

本文介绍如何在Vue项目中使用事件总线实现兄弟组件间的通信。通过在main.js中创建一个全局事件总线，并在需要通信的组件中使用$on监听事件和$emit触发事件，可以轻松实现组件间的数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考1：https://www.cnblogs.com/wangruifang/p/7772631.html

参考2：https://www.jianshu.com/p/b3d09c6c87bf

在main.js中引入

//中央事件总线 bus
Vue.prototype.bus = new Vue();

在App.vue中引入2个组件

兄弟组件1：Veaflet.vue

<script>
export default {
  mounted() {
      var that = this;
      this.bus.$on("msgToVeaflet",function(msg){
          alert("自定义的事件触发，接收到的数据"+msg);
      });
  }
}
</script>

兄弟组件2：containerLeft.vue

<template>
<button @click="sendToVeaflet">Click Me</button>
</template>

<script>
export default {
  methods:{
       sendToVeaflet(){
       this.bus.$emit('msgToVeaflet','666');
     }
  }
}
</script>

将消息666，发送到组件1

转载于:https://www.cnblogs.com/yingyigongzi/p/10838059.html