Vue 组件通信 Event Bus 中央事件

Event Bus 是vue组件通信的一种方式，适用于跨组件通信，任意两个组件都可以通信。官网介绍

举个例子：A城市的人要去B城市，先建立公路网,然后在A、B两个城市分别修一座汽车站，从A城市汽车站出发，到B城市汽车站下车，这就是Event Bus的大致原理

第一步 要想富，先修路

新建一个eventBus.js文件,这就是公路网

import Vue from 'vue'
export const EventBus = new Vue()

第二步 修建A城市汽车站

组件A把EventBus引到组件内

<template>
    <div>
        <button @click="pleaseClickMe">点我，我要去B城市</button>
    </div>
</template>
import { EventBus } from '@/bus/eventBus'
export default {
  name: 'A',
  methods: {
      pleaseClickMe () {
        <!--坐汽车走了-->
        <!--'gotoB'是事件名 可以触发多个event事件-->
        <!--Info 是传递的参数，可以传多个参数-->
        EventBus.$emit('gotoB', {
          Info: '我要去B城市啊'
        })  
      }
  }
}

第三步 B城市下车接收

修建B城市的汽车站--引入EventBus

<template>
    <div>
        <p>这里是从A组件传过来的消息{{ msg }}</p>
    </div>
</template>
import { EventBus } from '@/bus/eventBus'
export default {
  name: 'B',
  data () {
      return {
          msg: ''
      }
  },
  created () {
      pleaseClickMe () {
        <!--到地了，下车吧-->
        <!--'gotoB' 监听的EventBus事件名-->
        <!--param 接收的参数集合-->
          EventBus.$on('gotoB', param => {
          this.msg = param.Info
        }) 
      }
  },
  // 最好在组件销毁前清除事件监听
  beforeDestroy: function () {
    <!-- gotoB销毁事件名 doSomeThing 可选事件-->
      eventHub.$off('gotoB', this.doSomeThing)
      <!--如果有多个 可以继续写-->
      eventHub.$off('delete-someThing')
  }
}

小结

总的来说，这种方式实现并不复杂，使用范围更为广泛，比如同级组件、跨多层组件通信都可以。如果有更负责的交互，建议使用vuex