v3 + ts + mitt兄弟组件之间通信

116 阅读1分钟

使用场景

切换侧边菜单栏主题,菜单组件在Asideindex.vue文件中,切换主题按钮在EditSystem.vue文件中,相当于大哥和二弟的孙子之间进行"对话"了

image.png

下载插件

cnpm install mitt --save-dev

使用方法

src/utils/mitt.ts

import mitt from 'mitt';

type Events = {
    // 自定义事件名称
    event: void,
    // 任意传递的参数
    [parmas: string]: any
}

const emitter = mitt<Events>()

export default emitter;

EditSystem.vue

import mitter from '@/utils/mitt';

const handleChanageThem = () => {
    mitter.emit('eventName', parmas)
}

index.vue

import mitter from '@/utils/mitt';
// 此处的自定义方法名要和emit()的方法名保持一致
mitter.on('eventName', (e) => {
    // 此处可以处理一些事情
})