はじめに: mitt は、イベントのサブスクリプションとパブリッシングを実装するために使用される JavaScript ライブラリです。
1. インストール
npm install mitt -S
2. 新しい utils/eventBus.ts ファイルを作成します
// eventBus.ts 文件
import mitt from 'mitt'
const eventBus = mitt()
export default eventBus
3. 使用する
// 组件1
<template>
<div>
<p>组件1: {
{ message }}</p>
<button @click="offGetMessageFn">关闭指定事件</button>
<button @click="clearAllFn">清除所有自定义事件</button>
</div>
<template>
<script lang="ts" setup>
import eventBus from '@/utils/eventBus'
const message = ref<string>('')
// 监听事件 getMesage
eventBus.on('getMessage', (msg: string) => {
message.value = msg
})
// 关闭 getMesage 事件
const offGetMessageFn = () => {
eventBus.off('getMessage')
}
// 清除所有自定义事件
const clearAllFn = () => {
eventBus.all.clear()
}
</script>
// 组件2
<template>
<div>
<button @click="onClick">组件2: </button>
</div>
<template>
<script lang="ts" setup>
import eventBus from '@/utils/eventBus'
// 发送事件
const onClick = () => {
eventBus.emit('getMessage', 'hello 我是组件2发来的信息')
}
</script>