介绍 : mitt 是一个 JavaScript 库，用于实现事件的订阅和发布
1、安装
npm install mitt -S
2、新建 utils/eventBus.ts 文件文章来源：https://www.toymoban.com/news/detail-697444.html
// eventBus.ts 文件
import mitt from 'mitt'
const eventBus = mitt()
export default eventBus
3、使用文章来源地址https://www.toymoban.com/news/detail-697444.html
// 组件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>
到了这里，关于vue3 使用 mitt 插件实现非父子组件传值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
