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 了。
如何在组件之间发送消息？
使用事件总线在组件之间发送消息非常简单。你只需要在一个组件中发送消息，然后在另一个组件中监听消息。来看一个例子：
// 组件 athis.$bus.$emit('message', 'hello from a');// 组件 bthis.$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 方法移除事件监听器，以避免内存泄漏问题。希望这篇文章对你有帮助，感谢你的阅读！
以上就是vue3基础教程：使用vue.js事件总线的详细内容。