vue3 使用 mitt 插件实现非父子组件传值

俺是老王2023-09-11 1:35

介绍 : mitt 是一个 JavaScript 库，用于实现事件的订阅和发布

1、安装

bash 复制代码

npm install mitt -S

2、新建 utils/eventBus.ts 文件

ts 复制代码

// eventBus.ts 文件

import mitt from 'mitt'
const eventBus = mitt()
export default eventBus

3、使用

vue 复制代码

// 组件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>