Vue3 通信解决方案 Mitt 的使用

iwin621
4,436 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前言

今天在看 Vue3 的通信方法时, 发现推荐使用一个小巧的库: github.com/developit/m…, 119行 | 总体积也就 ~200b, . 也就暴露 4个接口API, 简单实用.

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

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

Mitt Usage:

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>

三种使用方式

  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

all

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

on

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

  • 参数 Parameters

  • type ( string | symbol ) 要侦听的事件类型或'*'所有事件

  • handler 函数响应给定事件调用的函数

off

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

参数 Parameters

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

emit

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

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

参数 Parameters

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

参考:

avatar
文章
阅读
粉丝