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

佚名 6年前 (2019-05-09) 随笔 712人围观抢沙发百度已收录

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

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

在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