Mitt —— 小而美的事件总线库

简介

Mitt是一个小巧而强大的 JavaScript 事件总线库,用于处理事件的发布和订阅。

用法示例

1、使用vite创建示例项目

项目名称:mitt-demo

框架:vue.js 3

bash 复制代码
$ yarn create vite

√ Project name: ... mitt-demo
√ Select a framework: >> Vue
√ Select a variant: >> JavaScript

2、进入示例项目根目录并安装依赖

bash 复制代码
# 进入项目根目录
$ cd mitt-demo
# 安装依赖
$ yarn

3、在项目中安装mitt

bash 复制代码
# 安装mitt
$ yarn add mitt

4、创建bus.js文件

src文件夹下创建utils文件夹,然后在utils文件夹下创建bus.js文件,bus.js文件内容如下:

js 复制代码
import mitt from 'mitt'
// 创建事件总线实例
const emitter = mitt()
export default emitter

我们在bus.js文件中通过mitt()创建了一个事件总线实例,用于发布和订阅事件。

5、创建事件发布组件 ------ EventPublisher.vue

src/components文件夹下创建事件发布组件 ------ EventPublisher.vue,文件内容如下:

vue 复制代码
<script setup>
import { ref } from 'vue'
import emitter from '../utils/bus'

const count = ref(0)

// 事件发布方法
const publish = () => {
  console.log('== 发布事件 ==')
  emitter.emit('incr', count.value += 1)
}
</script>

<template>
  <button @click="publish">发布事件</button>
</template>

<style scoped>
</style>

6、创建事件监听组件 ------ EventListener.vue

src/components文件夹下创建事件监听组件 ------ EventListener.vue,文件内容如下:

vue 复制代码
<script setup>
import { ref, onBeforeMount, onMounted } from 'vue'
import emitter from '../utils/bus'

const count = ref(0)

onMounted(() => {
  // 监听事件
  console.log('== 监听事件 ==')
  emitter.on('incr', (res) => {
    count.value = res
  });
})

onBeforeMount(() => {
  // 取消监听
  console.log('== 取消监听 ==')
  emitter.off('incr')
});
</script>

<template>
  <div class="listener">消息内容:{{ count }}</div>
</template>

<style scoped>
.listener {
  background-color: beige;
}
</style>

7、修改App.vue

App.vue中引入事件发布组件、事件监听组件。

vue 复制代码
<script setup>
import EventPublisher from './components/EventPublisher.vue'
import EventListener from './components/EventListener.vue'
</script>

<template>
  <event-publisher></event-publisher>
  <event-listener></event-listener>
</template>

<style scoped>
</style>

8、启动项目,查看效果

参考

相关推荐
sorryhc16 分钟前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy22 分钟前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq41 分钟前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开1 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
Codigger官方1 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔1 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
ObjectX前端实验室2 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者2 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱2 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
路很长OoO2 小时前
Flutter 插件开发实战:桥接原生 SDK
前端·flutter·harmonyos