在Vue3中使用event bus(事件总线)的步骤详解
一、创建事件总线
在Vue 3中，创建事件总线的方式与Vue 2有所不同。Vue 3不再直接使用Vue实例作为事件总线，而是使用一个空的对象或使用 mitt 库。下面是如何创建一个简单的事件总线：
// bus.js import mitt from 'mitt'; const emitter = mitt(); export default emitter;
二、在组件中使用事件总线
创建好事件总线后，可以在组件中引入并使用它来触发和监听事件。以下是如何在两个组件中使用事件总线进行通信的示例：
1、在发送事件的组件中
// SenderComponent.vue
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import emitter from './bus';
export default {
methods: {
sendMessage() {
emitter.emit('message', 'Hello from SenderComponent');
}
}
}
</script>
三、详细解释
1、为什么使用事件总线
事件总线是一种轻量级的解决方案，用于在Vue组件之间进行通信，尤其是在没有直接父子关系的组件之间。它的主要优势包括：
- 简洁：只需要一个简单的对象或库即可实现。
- 灵活：可以在任何地方触发和监听事件。
- 低耦合：组件之间不需要知道彼此的存在。
2、使用mitt库的优势
在Vue 3中，推荐使用 mitt 库来创建事件总线，因为它更轻量、性能更好，而且与Vue 3的Composition API兼容。mitt库的主要优点包括：
- 轻量级：只有几百字节大小。
- 简单易用：API非常简洁，只有
emit和on等少数几个方法。 - 性能优越：由于其实现简单，性能开销极低。
3、Vue 3中事件总线的替代方案
- Vuex：适用于需要全局状态管理的复杂应用。
- Provide/Inject：适用于祖先和后代组件之间的通信。
- Composition API：通过组合函数共享逻辑。
四、实例说明
以下是一个完整的实例，展示了如何使用事件总线在两个没有直接关系的组件之间进行通信。
1、创建一个新的Vue项目
首先，创建一个新的Vue 3项目：
npm init vue@latest
按照提示创建项目后，安装 mitt 库：
npm install mitt
2、创建事件总线
在项目根目录下创建一个 bus.js 文件，并添加如下代码：
import mitt from 'mitt'; const emitter = mitt(); export default emitter;
3、发送事件的组件
在 src/components 目录下创建一个 SenderComponent.vue 文件，并添加如下代码：
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import emitter from '../bus';
export default {
methods: {
sendMessage() {
emitter.emit('message', 'Hello from SenderComponent');
}
}
}
</script>4、接收事件的组件
在 src/components 目录下创建一个 ReceiverComponent.vue 文件，并添加如下代码：
<template>
<div>
<p>Received Message: {{ message }}</p>
</div>
</template>
<script>
import emitter from '../bus';
export default {
data() {
return {
message: ''
}
},
mounted() {
emitter.on('message', (msg) => {
this.message = msg;
});
},
beforeUnmount() {
emitter.off('message');
}
}
</script>
5、在主应用中使用组件
在 src/App.vue 文件中，添加如下代码：
<template>
<div id="app">
<SenderComponent />
<ReceiverComponent />
</div>
</template>
<script>
import SenderComponent from './components/SenderComponent.vue';
import ReceiverComponent from './components/ReceiverComponent.vue';
export default {
components: {
SenderComponent,
ReceiverComponent
}
}
</script>
到此这篇关于在Vue3中使用event bus(事件总线)的步骤详解的文章就介绍到这了,更多相关Vue3使用event bus(事件总线)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue如何使用原生高德地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
今天小编就为大家分享一篇vue单页应用在页面刷新时保留状态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
基于element-ui对话框el-dialog初始化的校验问题解决
这篇文章主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vuex中的state、getters、mutations、actions之间的关系解读
这篇文章主要介绍了vuex中的state、getters、mutations、actions之间的关系,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了SpringBoot+Vue 前后端合并部署的配置方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了vue3中的createApp分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章给大家介绍基于vue实现循环滚动列表功能，给大家介绍了该组件的用法，通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2021-09-09
Vue.js的核心包括一套“响应式系统”。“响应式”，是指当数据改变后，Vue会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。2021-05-05
本文主要介绍了Vue和SpringBoot之间传递时间的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
在vue+element-plus中无法同时使用v-for和v-if的问题及解决方法
由于路由中存在不需要遍历的数据所以像用v-if来过滤，但是报错，百度说vue不能同时使用v-if和v-for，今天小编给大家分享解决方式，感兴趣的朋友跟随小编一起看看吧2023-07-07
最新评论