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

我胡为喜呀2024-05-28 10:45

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>