vue3兄弟组件间的通信 mitt

1、安装插件

npm i mitt -s

2、在scr下的utils文件创建mitt.ts文件

/**
 * @author
 * @date 20240912
 * @description Create $bus, 使用方式 $bus.emit/$bus.on
 * */
import mitt from 'mitt'

const $bus = mitt()
export default $bus

两个子组件都引入mitt.js文件

3、子组件cihld2

  <div>
    <h3>兄弟组件间传值</h3>
    <el-button type="primary" @click="sendMsg">发送flag</el-button>
  </div>

import $bus from '../utils/mitt'

const isRightClickVal = ref(false)
const sendMsg = () => {
  console.log('通知兄弟组件')
  $bus.emit('flag', 'isRightClickVal')
}

4、子组件child1 

import $bus from '../utils/mitt'

// 接收兄弟组件child2的信息
let msg = ref('默认')
$bus.on('flag', (val) => {
  msg.value = val
  console.log('msg:',msg.value);
  
})

这样兄弟组件child2触发事件时，就会通过$bus.emit发出通知，兄弟组件child1通过$bus.on监听到，就可以做下一步的逻辑。

注意，当子组件child1调用完$bus.on后，在组件销毁前，销毁监听事件。

onUnmounted(() => {
  console.log('unmounted');
  $bus.off('flag')
})