什么是全局事件总线？

全局事件总线是一种模式，用于在Vue应用程序的不同组件之间进行通信。它允许我们在组件之间传递消息，而无需直接引用或知道彼此的存在。这种方式可以简化组件之间的通信，并使得应用程序更加松耦合。

在Vue2中，我们可以利用Vue实例作为事件总线来实现全局事件总线的功能。Vue实例提供了事件触发和监听的方法，我们可以利用这些方法在任何地方发送和接收消息。

如何在Vue2中使用全局事件总线？

首先，我们需要创建一个全局的Vue实例来充当事件总线。这个实例可以在应用程序的任何地方访问到，因此可以被用来发送和接收事件。

css 复制代码

// EventBus.js

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

接着，我们可以在任何组件中导入该事件总线并使用它来发送和接收事件。

css 复制代码

// ComponentA.vue

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from Component A');
    }
  }
}
</script>

css 复制代码

// ComponentB.vue

<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  created() {
    EventBus.$on('message', message => {
      this.receivedMessage = message;
    });
  }
}
</script>

在上面的示例中，ComponentA发送了一个名为"message"的事件，并携带了消息"Hello from Component A"。ComponentB监听了这个事件，并在收到消息时更新了UI显示。

通俗一点就是：

想象一下你正在组织一个派对。你是主持人，但并不是每个人都和你直接说话，他们之间也不一定都认识。有时候，某人想要向所有人宣布一些事情，比如"蛋糕已经切好了！"或者"准备开始玩游戏了！"这时候，你会大声喊一句，让大家都知道。在Vue中，全局事件总线就像是这个主持人，它可以帮助不同的组件之间传递消息，让它们能够相互通信，而不需要直接联系。

首先，我们要创建一个全局事件总线，就像是给这个主持人起了一个电话号码，这样任何人都可以通过这个号码联系到它。然后，我们可以在任何一个组件中使用这个号码来发送消息，就像是打电话告诉主持人一些事情。其他组件则可以监听这个号码，当它接收到消息时，就会采取相应的行动，就像是听到主持人的通知一样。

这样，通过全局事件总线，我们可以实现不同组件之间的通信，让应用程序更加灵活和高效。

打卡5.12