什么是全局事件总线？
全局事件总线是一种模式，用于在Vue应用程序的不同组件之间进行通信。它允许我们在组件之间传递消息，而无需直接引用或知道彼此的存在。这种方式可以简化组件之间的通信，并使得应用程序更加松耦合。
在Vue2中，我们可以利用Vue实例作为事件总线来实现全局事件总线的功能。Vue实例提供了事件触发和监听的方法，我们可以利用这些方法在任何地方发送和接收消息。
如何在Vue2中使用全局事件总线？
首先，我们需要创建一个全局的Vue实例来充当事件总线。这个实例可以在应用程序的任何地方访问到，因此可以被用来发送和接收事件。
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
接着，我们可以在任何组件中导入该事件总线并使用它来发送和接收事件。
// 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>
// 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
