vue.js 是一款流行的前端 javascript 框架，它的事件总线是作为其核心功能之一而存在的。在 vue.js 中，事件总线充当了一个组件之间通信的媒介。这篇文章将向你介绍如何使用 vue.js 的事件总线。
事件总线是什么？
事件总线是一个中央事件总线模式的实现。简单来说，事件总线是一个全局的 Vue 实例，我们可以在应用程序中任何地方使用它。它充当了一个组件之间通信的媒介。
Vue.js 将事件总线挂载在 Vue.prototype 上，这意味着它是 Vue 实例的一部分，因此你可以在应用程序中任何地方使用它。
如何设置事件总线？
立即学习“前端免费学习笔记（深入）”；
设置事件总线非常简单，只需要在新的 Vue 实例中声明它。在你的 main.js 文件中，你可以添加下面的代码：
Vue.prototype.$bus = new Vue();
这行代码实例化了一个 Vue 实例，并将其挂载在 Vue.prototype 上，使得它成为 Vue 实例的一部分。现在，你可以在任何组件中使用 $bus 了。
如何在组件之间发送消息？
使用事件总线在组件之间发送消息非常简单。你只需要在一个组件中发送消息，然后在另一个组件中监听消息。来看一个例子：
// 组件 A
this.$bus.$emit('message', 'hello from A');
// 组件 B
this.$bus.$on('message', message => {
console.log(message); // hello from A
});在组件 A 中，我们使用 $emit 方法发送了一条 'message' 消息，并带有数据 'hello from A'。在组件 B 中，我们使用 $on 方法监听 'message' 消息，并且在回调函数中处理消息。
需要注意的是，在组件销毁时，需要使用 $off 方法将事件监听器移除，以避免内存泄漏问题。
如何在应用程序中使用事件总线？
现在你知道了如何设置事件总线和在组件之间发送消息，那么如何在应用程序中使用它呢？以下是一个简单的示例：
// App.vue
<template>
<div>
<router-view />
<button @click="sendMessage">Send message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$bus.$emit('message', 'hello from App');
}
}
};
</script>
// Home.vue
<template>
<div>
<h1>Welcome Home</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
},
created() {
this.$bus.$on('message', message => {
this.message = message;
});
}
};
</script>在这个示例中，我们在 App.vue 中定义了一个按钮，它可以发送 'message' 消息。在 Home.vue 中，我们使用 $on 方法监听 'message' 消息，并且将消息显示在页面上。
总结
事件总线是一个非常重要的 Vue.js 功能，它可以帮助你实现组件之间的通信。通过使用 $emit 和 $on 方法，你可以轻松地在组件之间传递消息。请记住，在组件销毁时请使用 $off 方法移除事件监听器，以避免内存泄漏问题。希望这篇文章对你有帮助，感谢你的阅读！
