Vue3 使用 mitt 实现跨组件通信

妖狐艹你老母 2023-09-26 20:20 52阅读 0赞

## Vue3 使用 mitt 实现跨组件通信 ##

#### 文章目录 ####

*  Vue3 使用 mitt 实现跨组件通信
 *   *  1、安装
     *  2、引入
     *   *  全局总线，vue 入口文件 \`main.ts\` 中挂载全局属性
     *  3、代码演示
     *   *  App.vue
         *  Hello1.vue
         *  运行结果
     *  4、方法说明
     *  5、封装 hook 示例
     *  6、说明

### 1、安装 ###

pnpm add mitt

### 2、引入 ###

#### 全局总线，vue 入口文件 `main.ts` 中挂载全局属性 ####

import {
         createApp } from 'vue'
    import './style.css'
    import App from './App.vue'
    // 导入 mitt
    import mitt from "mitt"
    
    const app = createApp(App);
    // 将 mitt 挂载到 Vue 实例上
    app.config.globalProperties.$bus = mitt();
    app.mount('#app')

### 3、代码演示 ###

#### App.vue ####

<template>
      <Hello1 />
      <Hello2 />
      <Hello3 />
      <button @click="sendMsg">发消息</button>
    </template>
    
    <script setup lang="ts">
    import Hello1 from "./components/Hello1.vue";
    import Hello2 from "./components/Hello2.vue";
    import Hello3 from "./components/Hello3.vue";
    import {
        getCurrentInstance} from 'vue'
    const bus = getCurrentInstance()?.appContext.config.globalProperties.$bus;
    const sendMsg = () => {
        
      bus.emit('hello1', 'hello1')
      bus.emit('hello2', 'hello2')
      bus.emit('hello3', 'hello3')
    }
    </script>

#### Hello1.vue ####

> 其他类似

#### 运行结果 ####

![image-20230415005249503][]

### 4、方法说明 ###

import mitt from 'mitt'
    
    const emitter = mitt()
    
    // listen to an event
    emitter.on('foo', e => console.log('foo', e) )
    
    // listen to all events
    emitter.on('*', (type, e) => console.log(type, e) )
    
    // fire an event
    emitter.emit('foo', {
         a: 'b' })
    
    // clearing all events
    emitter.all.clear()
    
    // working with handler references:
    function onFoo() {
        }
    emitter.on('foo', onFoo)   // listen
    emitter.off('foo', onFoo)  // unlisten

### 5、封装 hook 示例 ###

import {
        onUnmounted} from 'vue'
    import mitt from 'mitt'
    
    type IUseEventbus = {
        
        customEmit: (eventName: string) => void
        customOn: (eventName: string, callback: () => void) => void
        toRefreshTable: () => void
        refreshTable: (callback: () => void) => void
    }
    
    const emitter = mitt();
    
    /**
     * @description: 自定义触发器
     * @param {*} eventName 名称
     */
    const customEmit = (eventName: string) => {
        
        emitter.emit(eventName)
    }
    
    /**
     * @description: 自定义接收器
     * @param {*} name 名称
     * @param {*} callback 回调的函数
     */
    const customOn = (eventName: string, callback: () => void) => {
        
        emitter.on(eventName, () => callback())
    }
    
    /**
     * @description: 通知刷新表格数据
     */
    const toRefreshTable = () => {
        
        emitter.emit('refreshTable')
    }
    
    /**
     * @description: 刷新表格数据
     * @param {*} callback 回调的函数
     */
    const refreshTable = (callback: () => void) => {
        
        emitter.on('refreshTable', () => callback())
    }
    
    /**
     * @description: 导出useEventbus
     */
    export const useEventbus = (): IUseEventbus => {
        
        // 销毁的事件
        onUnmounted(() => {
        
            // 清空所有的事件，避免多组件互相清理
            emitter.all.clear()
        })
    
        return {
        
            customEmit,
            customOn,
            toRefreshTable,
            refreshTable
        }
    }

### 6、说明 ###

`emitter.on` 第一个参数是消息 key ，第二个参数可以是**基本数据、对象、函数**！

[image-20230415005249503]: https://img-blog.csdnimg.cn/img_convert/c2e36c2c102806d412475a80f4bf8821.png