携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

在使用框架开发中，我们会经常接触到组件这个东西，组件通信也是组件中经常接触到的，组件通信的方案有很多，我们今天来实现一下EventBus组件通信方式

EventBus被称为事件总线，我们可以把他当做组件通信的中央集中站，我们通过注册，发送，接收事件等方法实现组件的互相沟通，不过我们需要注意的是，由于EvnentBus中注册，接收，发送等方法无法捕获事件来源或去向，所以很容易造成难以维护的惨状。

EventBus的实现

首先我们在Vue项目入口文件mian.js中创建一个EventBus事件总线并挂载在Vue原型上，以此我们可以进行使用或者监听

//mian.js
import Vue from 'vue'
Vue.prototype.$EventBus=new Vue();

这里的EventBus只不过是一个名字，你也可以把他换成其他名字

我们创建完事件中心之后，我们来注册并发送事件，注册发送事件需要使用$emit方法，我们在home组件中通过div元素绑定一个sending方法，通过this获取到挂载到原型上的EventBus事件总线，通过$emit方法进行注册发送出一个全局事件，在$emit发送事件时，第一个参数是自定义发送的事件名，第二个参数是一个函数，函数中写你发送出去的数据等等操作，这里我们返回出去一个对象

// home组件
<template>
  <div >
  <div @click="sending">发送事件</div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    }
  },
  methods: {
      sending() {
      this.$EventBus.emit('onSend', function() {
        //事件发送出去的数据等操作
        return {
          name: '若水在这里等你'
        }
      })
    },
  },
}
</script>

我们在index组件中接收一下EventBus事件中心发送出去的onSend事件，我们通过$on去接收$emit发送出来的事件，$on方法接收两个参数，第一个参数是接收的自定义事件名，第二个参数是一个函数，函数中的形参是$emit方法发送过来的数据，我们拿到数据之后就可以进行操作了

//index组件
<template>
  <div >
  </div>
</template>
<script>
export default {
  data() {
    }
  },
    mounted() {
      this.receive()
    },
  methods: {
         receive(){
      this.$EnevntBus,$on('onSend',function(value){
        console.log('接收到的数据',value);
      })
    }
    },
  },
}
</script>

这里会出现一个问题，那就是我们从home组件中发送了一个onSend事件，在index组件中接收，如果我们这个时候离开index组件重新进入则会再次触发$on监听的onSend事件，这是因为我们并没有将事件中心发送的事件进行卸载，这个时候我们需要在index组件中设置离开当前页面卸载当前页面使用到的所有事件中心自定义事件，我们通过$off方法进行卸载，$off方法接收一个参数，这个参数是我们在事件中心注册的事件名，我们离开页面进行卸载，这样就不会出现这样的问题了

 beforeDestroy(){
  	this.$EnevntBus.$off("onSend")
  }

坚持努力，无惧未来！

Vue组件数据共享EventBus实现

EventBus的实现