vue非父子组件间的事件监听之全局事件总线

为了实现期望的功能，很多时候我们需要在在一个组件中监听另一个组件的事件，父子组件之间的事件监听可以分别通过$emit和 $refs。但是在非父子组件间如何实现呢？事件总线是一个比较方便的方法。
全局事件总线实际是在main.js中给vue实例新增一个全局属性，并将该属性赋值为一个vue实例，通过 $emit来触发，通过 $on来监听，通过 $off来释放。
1.引入事件总线

2.
在组件A中触发事件

<template>
  <div>
    <button @click="submit()"> 按钮</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
       submit(){
         //如果是通过方法2初始化的事件总线这里就不要使用this.了
         this.$EventBus.$emit('trigger','A的数据')
       }
        
    }
  }
</script>

3.在组件B中监听A触发的事件：
第一个参数即是要监听的事件名，和A组件触发的事件名完全一致

mounted(){
      this.$EventBus.$on('trigger',(msg)=>{
        //想要执行的操作
        //msg便是A触发事件时传递过来的参数
        console.log(msg)
      })
    }

4.在B destoryed前删除监听的事件：

destoryed(){
      this.$EventBus.$off('trigger')
    }