本文主要是介绍Vue3实战笔记(54)—揭秘Vue3实战:1分钟学会mitt,轻松玩转跨组件通讯,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 前言
- 一、自定义的 useMitt
- 二、在组件中使用 useMitt:
- 三、确保 useMitt 的单例性
- 总结
前言
在 Vue3 中,由于官方移除了on\off 和 $once 实例方法,导致原先基于 Vue2 的事件总线(EventBus)模式不再适用。因此,对于需要进行组件间通信的场景,Vue3 推荐使用如 props、emits、provide/inject、vuex、pinia 等官方提供的方案。然而在某些情况下,开发者可能仍希望利用事件总线的简单性,特别是在小型项目中。这时,Mitt.js 就成为了一个推荐的选项,它提供了与框架无关、简洁且高效的事件监听和触发机制。
一、自定义的 useMitt
Mitt.js 是一个轻量级的第三方事件发射器库,专为 Vue3 和其他框架设计。
在 Vue 3 中使用 mitt 或类似的库时,我们通常会创建一个自定义的 useMitt Composition API 函数,以便在组件内部使用 mitt 的功能。这样,我们就可以利用 Vue 3 的 Composition API 来更好地组织和复用逻辑。
首先,创建一个 useMitt.js 文件,并在其中定义一个 useMitt 函数,用于返回 mitt 实例的方法。
// useMitt.js
import mitt from 'mitt'; // 创建一个 mitt 实例,并导出相关的函数
const emitter = mitt(); export function useMitt() { return { emit: emitter.emit.bind(emitter), on: emitter.on.bind(emitter), off: emitter.off.bind(emitter), // 可以根据需要添加其他 mitt 方法 };
}
二、在组件中使用 useMitt:
现在,你可以在任何需要通信的组件中导入并使用 useMitt 函数。每个组件都将使用相同的 mitt 实例来发射和监听事件。
代码如下(示例):
// ChildComponent.vue
<template> <button @click="emitEvent">Emit Event</button>
</template> <script>
import { ref } from 'vue';
import { useMitt } from './useMitt'; export default { setup() { const { emit } = useMitt(); const message = ref('Hello from ChildComponent!'); const emitEvent = () => { emit('child-event', message.value); }; return { emitEvent, }; },
};
</script>
// ParentComponent.vue
<template> <div> <ChildComponent /> <p v-if="receivedMessage">Received: {{ receivedMessage }}</p> </div>
</template> <script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import ChildComponent from './ChildComponent.vue';
import { useMitt } from './useMitt'; export default { components: { ChildComponent, }, setup() { const { on, off } = useMitt(); const receivedMessage = ref(null); onMounted(() => { on('child-event', (message) => { receivedMessage.value = message; }); }); onBeforeUnmount(() => { off('child-event'); }); return { receivedMessage, }; },
};
</script>
在这个例子中,ChildComponent 发射一个名为 child-event 的事件,并附带一条消息。ParentComponent 则监听这个事件,并在接收到消息时更新其状态。由于 ChildComponent 和 ParentComponent 都使用同一个 mitt 实例(通过 useMitt 函数获取),它们能够顺利地进行通信。
三、确保 useMitt 的单例性
代码如下(示例):
重要的是要确保在整个应用程序中只创建一个 mitt 实例,并通过 useMitt 函数共享它。这样可以避免在组件之间产生多个事件流,并确保事件的正确传播。在上面的例子中,useMitt.js 文件中的 emitter 是在模块作用域内创建的,因此每个导入 useMitt 的组件都会得到相同的实例。
总结
通过这种方法,你可以轻松地在 Vue 3 的多个组件之间使用 mitt 进行通信。只需确保所有组件都通过 useMitt 函数访问相同的 mitt 实例,然后就可以自由地发射和监听事件了。
童年啊,童年是永远的梦 梦里的小船,飘荡在彩虹的河流 童年的纸飞机,飞向云端 童年的歌谣,唱出心中的欢乐
这篇关于Vue3实战笔记(54)—揭秘Vue3实战:1分钟学会mitt,轻松玩转跨组件通讯的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!