背景

在 Vue2中使用 Bus总线-EventBus 进行组件通信, 而在Vue3 中推荐使用 mitt

既然推荐使用, 又这么 "简单"(小而美), 就来看看具体怎么使用的

安装引入

npm 安装 mitt

$ npm install --save mitt
复制代码

引入

// using ES6 modules
import mitt from 'mitt'

// using CommonJS modules
var mitt = require('mitt')

<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>

相关API

all

事件名称到已注册处理程序函数的映射。

on

为给定类型注册一个事件处理程序。

• 参数 Parameters
• type ( string | symbol ) 要侦听的事件类型或'*'所有事件
• handler 函数响应给定事件调用的函数

off

删除给定类型的事件处理程序。如果handler省略，则删除给定类型的所有处理程序。

参数 Parameters

• type （字符串|符号）要取消注册的事件类型handler，或'*'
• handler Function 要删除的处理程序函数

emit

调用给定类型的所有处理程序。如果存在，'*'则在类型匹配的处理程序之后调用处理程序。

注意：不支持手动触发“*”处理程序。

参数 Parameters

• type ( string | symbol )要调用的事件类型
• evt Any？ 任何值（推荐使用对象并且功能强大），传递给每个处理程序

使用实践

三种使用方式

1. 全局总线: Vue main.js 进行全局注册
2. 像 Vue2 一样封装一下, 自定义的"bus总线"
3. 直接在组件中导入使用(推荐)

直接使用

Vue3.x 源码移除了 $on/$off/$once方法, 使用 mitt 方便不占地..~

mitt 的用法和 EventEmitter 类似，通过 on 方法添加事件，off 方法移除，clear 清空所有。

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

封装挂载

• 可以在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'

调用

• 通过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()
    })
  }
}