vue3+ts 中使用mitt进行跨组件通信

mitt插件的使用

安装插件

官方文档

javascript 复制代码
pnpm i mitt --s //我用的pnpm
或
npm i --s mitt
或
yarn add mitt

进行封装一个模块,对外暴露一个Mitt实例

1、在utils文件夹下新建mitt(例如 mitt.ts),用于初始化并导出 mitt 实例:

javascript 复制代码
// src/eventBus.ts
import mitt from 'mitt';

// 定义事件类型
type Events = {
  someEvent: string;
  anotherEvent: number;
  // 这里可以定义其他事件类型
};

// 创建一个事件总线实例
const mitter = mitt<Events>();

export default mitter;

使用

通过emit触发/on监听

javascript 复制代码
//在需要传送数据的组件使用
<template>
  <div>
    <button @click="emitEvent">Emit Event</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import mitter from '@/utils/mitt';

const emitEvent = () => {
  mitter.emit('someEvent', 'Hello from component!');
};
</script>
javascript 复制代码
// 在需要接收的组件中使用
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import mitter from '@/utils/mitt';

const message = ref('');

const handleSomeEvent = (payload: string) => {
  message.value = payload;
};

onMounted(() => {
  mitter.on('someEvent', handleSomeEvent);
});

// 记得移除哦
onBeforeUnmount(() => {
  mitter.off('someEvent', handleSomeEvent);
});

// ======================或者
mitter.on('someEvent', (val: string)=>{
  message.value = val
 });
</script>
相关推荐
lecepin7 分钟前
AI Coding 资讯 2025-09-10
前端·javascript·面试
RestCloud18 分钟前
PostgreSQL大表同步优化:如何避免网络和内存瓶颈?
前端·数据库·api
RestCloud20 分钟前
iPaaS 与传统 ESB 的区别,企业该如何选择?
前端·架构
Mapmost21 分钟前
三维场景加载卡顿?可能是显卡设置出了问题
前端
书源33 分钟前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
前端啵啵猪38 分钟前
useCallback 和 useMemo,什么时候用才是有效的?
前端·react.js
计算机学姐42 分钟前
基于Python的旅游数据分析可视化系统【2026最新】
vue.js·后端·python·数据分析·django·flask·旅游
星哥说事1 小时前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家1 小时前
FTP文件传输服务
linux·运维·服务器·前端