Vue中如何使用event bus进行全局组件通讯？

1. 什么是event bus？

Event bus是一种用于多组件通讯的模式，挂载在vue实例上，并基于v-on/v-bind监听与传播事件。作为一个全局类，Event Bus 可以被任何组件使用。不同于组件内的监听，Event Bus 实现了不同组件间的通信和信息共享，简化了组件间复杂的通信方式。

Vue中提供了一个工具类来实现event bus。可以将一个空的Vue实例作为事件总线。

import Vue from 'vue';
export const Bus = new Vue();

上述代码中，定义Bus实例作为Vue实例export出去供其他组件使用。

2. 如何使用event bus传递信息？

2.1 发送事件

Event bus发送事件通常由触发事件的组件完成，可以使用bus.$emit()方法指定event name和传递的参数。以下代码为例：

export default {
  methods: {
    showAlert() {
      Bus.$emit('show-alert', 'Hello world!');
    }
  }
};

上述代码中，当组件内方法showAlert被调用时，控制台将会打印出 ‘Hello world!’ 。

2.2 监听事件

任何组件都可以监听事件，要监听事件需要使用bus.$on()方法并指定监听的event name和回调函数。以下代码为例：

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    Bus.$on('show-alert', (message) => {
      this.message = message;
      alert(this.message);
    });
  }
};

上述代码在组件created钩子函数中监听名为'show-alert'的事件并执行回调函数。在监听到事件后，回调函数将值赋给组件内的message属性并弹出包含该值的弹窗显示。

3. event bus在vue项目中的应用

在实际开发中，一个项目可能包含有多个组件，在不同的组件中互相传递数据或者共同响应某个事件。Event Bus是解决vue中组件之间通信的一个非常好的方式，使用起来既简单又方便。

3.1 父组件向子组件传递信息

在组件中使用props传递信息时，只能是由父组件向其子组件传递信息。如果需要由父组件向子组件传递信息时，可以使用event bus。

// Son.vue 子组件
export default {
  data () {
    return {
      sonMessage: ''
    }
  },
  created () {
    Bus.$on('father-message', (msg) => {
      this.sonMessage = msg;
      console.log('sonMessage: ', this.sonMessage)
    })
  }
}
// Father.vue 父组件
export default {
  methods: {
    sendMsgToSon () {
      Bus.$emit('father-message', 'Hello son')
    }
  }
}

上述代码为例，Son.vue组件监听了event name为'father-message'的事件并在事件被触发时执行回调函数将事件参数赋值给组件内的sonMessage变量。Father.vue组件提供了一个方法，触发event name为'father-message'的事件并传递‘Hello son’作为参数。在控制台上执行'fatherMessage: Hello son'。

3.2 兄弟组件之间的通信

当两个兄弟组件需要通信时，Vue官方推荐的方式是将它们的共同状态提取到它们的最近公共父组件中，但有时这样做可能会导致结构棱角分明的组件树变得不必要地复杂。event bus提供了另一种替代方案。

// BrotherA.vue
export default {
  data () {
    return {
      brotherA: ''
    }
  },
  created () {
    Bus.$on('brotherA-message', (msg) => {
      this.brotherA = msg;
      console.log('brotherA: ', this.brotherA)
    })
  }
}
// BrotherB.vue
export default {
  methods: {
    sendMsgToBrotherA () {
      Bus.$emit('brotherA-message', 'Hello brotherA')
    }
  }
}

在上述代码中，BrotherA.vue组件监听了event name为'brotherA-message'的事件并在事件被触发时执行回调函数将事件参数赋值给组件内的brotherA变量。BrotherB.vue组件提供了一个方法，触发event name为'brotherA-message'的事件并传递‘Hello brotherA’作为参数。在控制台上执行'brotherA: Hello brotherA'。

总结

vai-eventbus是vue框架中非常实用的全局组件通讯方式。通过对应event name，我们可以在多个组件之间进行双向通讯，并更好地将组件分离。当然在实际开发中也需要避免过度使用event bus，过多的全局事件会破坏代码的可维护性并带来后续的维护困难。