Vue3 数据总线的实现

npm i mitt

import mitt from "mitt";

const emitter = mitt();
export default emitter;

<template>
  <div>
    <div>Bar: {{ date }}</div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from 'vue';
import emitter from './emitter';

const date = ref()
onMounted(() => {
  emitter.on('bar', (data) => {
    date.value = data
  })
})

onBeforeMount(() => {
  emitter.off('bar')
})
</script>

// Foo.vue
<template>
  <div>
    <span>Foo: </span>
    <button @click="click">触发事件</button>
  </div>
</template>
<script setup lang="ts">
import emitter from './emitter';

function click() {
  emitter.emit('bar', new Date().toLocaleString());
}
</script>

function mitt() {
    const all = new Map();
    return {
        // 订阅事件
        on(type, handler) {
            const handlers = all.get(type)
            if (handlers) {
                handlers.push(handler)
            } else {
                all.set(type, [handler])
            }
        },
        // 取消订阅
        off(type, handler) {
            const handlers = all.get(type)
            if (!handlers) {
                return
            }
            if (handler) {
                const index = handlers.indexOf(handler)
                if (index > -1) {
                    handlers.splice(index, 1)
                }
            } else {
                all.set(type, [])
            }
        },
        // 发布事件
        emit(type, ...args) {
            const handlers = all.get(type);
            handlers?.slice().map(handler => {
                handler(...args)
            })
        }
    }
}