Vue3使用mitt进行组件通讯

Vue2.x使用EventBus进行组件通讯，而Vue3.x推荐使用mitt.js。
比起Vue实例上的EventBus，mitt.js好在哪里呢？首先它足够小，仅有200bytes，其次支持所有事件的监听和批量移除，它还不依赖Vue实例，因此能够跨框架使用，React或者Vue，甚至jQuery项目都能使用同一套库。

1. 安装

推荐使用yarn安装（用过都知道有多丝滑）

yarn add mitt
复制代码

或者经过npm安装

npm install --save mitt
复制代码

2. 引入到项目并挂载

能够在main.js挂载到全局

// 标准的ES模块化引入方式
import mitt from 'mitt'

const app = createApp(App)

// vue3.x的全局实例，要挂载在config.globalProperties上
app.config.globalProperties.$EventBus = new mitt()
复制代码

/common/EventBus.js：也能够封装一个ES模块，对外暴露一个Mitt实例

import mitt from 'mitt'
export default new mitt()
复制代码

/views/Home.vue：业务模块引入来使用

import EventBus from '/common/EventBus.js'
复制代码

3. 使用

经过on监听/emit触发

/* * App.vue */
// setup中没有this，须要经过getCurrentInstance来获取Vue实例
import { getCurrentInstance } from 'vue'
import { Mp3Player } from '/common/Mp3Player.js'

export default {
  setup(){
    // ctx等同于Vue2.x的this
    const { ctx } = getCurrentInstance()
    
    // 监听-若是有新任务则播放音效
    ctx.$EventBus.on('newTask', data => {
      Mp3Player.play()
    })

    // 也能够经过*监听全部任务
    ctx.$EventBus.on('*', data => {
      console.log('EventBus come in', data)
    })
  }
}


/* * Control.vue */
// 判断有新任务时，触发
ctx.$EventBus.emit('newTask', data)
复制代码

off移除事件

import {
    onBeforeUnmount,
    getCurrentInstance
  } from 'vue'

export default {
  setup(){
    const { ctx } = getCurrentInstance()

    onBeforeUnmount(() => {
      // 移除指定事件
      ctx.$EventBus.off('newTask')

      // 移除所有事件
      ctx.$EventBus.all.clear()
    })
  }
}
复制代码

Vue3使用mitt进行组件通讯

1. 安装

2. 引入到项目并挂载

3. 使用

参考