mitt#
与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。
1npm install --save mitt1// 引入mitt
2import mitt from 'mitt'
3
4// 调用mitt
5const emitter = mitt()
6
7// 暴露
8export default emitter:::
API#
all#
拿到所有绑定事件
1// 清除所有事件
2emitter.all.clear()on#
监听事件
1// 监听某个事件
2emitter.on('事件名', (e) => {
3 console.log
4});
5
6// 监听所有事件
7emitter.on('*', (type, e) => console.log(type, e) )off#
解绑事件
1// 解绑某个事件
2emitter.off('事件名', (e) => {});emit#
触发事件
1// 触发某个事件
2emitter.emit('事件名', { a: 'b' })案例#
提供数据的组件，在合适的时候触发事件
接收数据的组件：绑定事件、同时在销毁前解绑事
1<template>
2 <h2>父组件</h2>
3 <hr/>
4 <child-comp/>
5 <hr/>
6 <brother-comp/>
7</template>
8
9<script lang="ts" name="ParentComp" setup>
10import ChildComp from "@/components/ChildComp.vue";
11import BrotherComp from "@/components/BrotherComp.vue";
12
13</script>1<template>
2 <h2>子组件</h2>
3 <p>玩具：{{ toy }}</p>
4 <button @click="emitter.emit('send-toy', toy)">玩具给兄弟</button>
5</template>
6
7<script lang="ts" name="ChildComp" setup>
8import {ref} from 'vue'
9import emitter from "@/utils/emitter";
10
11let toy = ref('钢铁侠')
12</script>1<template>
2 <h2>兄弟组件</h2>
3 <p>哥哥给的玩具：{{ toys }}</p>
4</template>
5
6<script lang="ts" name="BrotherComp" setup>
7import emitter from "@/utils/emitter";
8
9import {onUnmounted, ref} from "vue";
10
11let toys = ref('')
12
13emitter.on('send-toy', (value: string) => {
14 toys.value = value
15})
16
17// 在组件卸载时解绑send-toy事件
18onUnmounted(() => {
19 emitter.off('send-toy')
20})
21</script>:::
目录