本示例基于vue3

使用要点：发送数据---- $bus.emit('password',num)

接收数据----在onMounted() 中  $bus.on('password',(data)=>{})

双方定一个交换数据的号码，使用该号码发送或接收数据

1、安装

npm i mitt

2、在src文件夹下utils文件夹，在其下在新建bus.js文件

import mitt from 'mitt';
const $bus = mitt();
export default $bus;

3、使用

简单示例

新建两个兄弟组件，demoA发送数据，demoB接收数据

demoA （发出数据）

<template>
    <div class="demoA">
        <h1>demoA</h1>
        <el-button type="primary" @click="increace()">Primary</el-button>
        {
   
   { num }}
    </div>
</template>
 
<script setup>
import { ref,onMounted  } from 'vue';
import $bus from '../utils/bus.js'
 
 
const num = ref(1);
const increace = ()=>{
    setInterval(()=>{
        num.value++;
        // 发送数据
        $bus.emit('event',num)
    },1000)
    
}
</script>

demoB （接收数据）

<script setup>
import { ref,unref,onMounted  } from 'vue';
import $bus from '../utils/bus.js'
 
// 接收数据
onMounted(()=>{
    $bus.on('event',(data)=>{
        console.log(unref(data),'收到值了');
    })
})
</script>

 踩坑点：

1、点击一次，触发多次，导致多次传递重复的值

解决办法：

在传值的页面加上 ↓

onUnmounted(() => {
    $bus.off('event');
});