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

参考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

猜你喜欢

转载自www.cnblogs.com/yingyigongzi/p/10838059.html