前端——Vue3 事件通讯mitt

Vue3.x 中eventBus -- mitt用法_爱划水de鲸鱼哥～的博客-CSDN博客

Vue3.x中移除了$on 、$off等自带的自定义事件相关方法，因此在vue3中推荐我们使用mitt事件总线传递数据，其实mitt的使用方式和vue原本的自定义事件使用方式相同

Mitt

Mitt是一个体积极小的第三方消息发布/订阅式JavaScript库，React、Vue均可以使用。

安装mitt库

        npm install --save mitt

在组件中使用

安装好mitt后，直接引入mitt实例化后即可使用mitt；

    import mitt from 'mitt'
    
    const emitter = mitt()

    emitter.on('foo', e => console.log(e) )  //emitter
   
    emitter.emit('foo', 'emitter')

封装mitt

在utils目录下，新建 mitt.js 文件，写入下面代码进行封装；

    import mitt from 'mitt'

    const emitter =new mitt()

    export default emitter

在使用中直接引入emitter使用即可；

    import emitter from '../api/mitt'

    emitter.on('foo', e => console.log(e) )  //emitter

    emitter.emit('foo', 'emitter')

mitt用法

引入封装好的mitt即可直接使用mitt，但需要注意：注册事件最好在钩子onMounted中进行，并且注册的事件需要在onUnmounted钩子中移除。

    // 引入 mitt
    import emitter from '../api/mitt'

    // 注册
    emitter.on('eventName', function(e) {
        console.log(e)
    })

    // 调用
    emitter.emit('eventName', 'emitter')

    // 移除
    emitter.off('eventName')

控制台输出： emitter

ps: 注册事件和调用事件的两个组件，不需要是父子组件，兄弟组件以及其他组件均可。

mitt核心原理

mitt的核心原理，就是通过 map 的方法保存函数。

export default function mitt(all) {
    all = all || new Map();
    return {
        all,
        // 注册
        on(type, handler) {
            const handlers = all.get(type);
            const added = handlers && handlers.push(handler);
            if (!added) {
                all.set(type, [handler]);
            }
        },
        //调用
        emit(type, evt) {
            ((all.get(type) || [])).slice().map((handler) => { handler(evt); });
            ((all.get('*') || [])).slice().map((handler) => { handler(type, evt); });
        },
        //移除
        off(type, handler) {
            const handlers = all.get(type);
            if (handlers) {
                handlers.splice(handlers.indexOf(handler) >>> 0, 1);
            }
        },
    };
}