vue3（四）兄弟组件传值，事件总线-mitt在Vue3中事件总线模式已经被移除，官方建议使用外部的、实现了事件触发器接

兄弟组件传值-mitt

使用事件总线进行兄弟组件传值，在Vue3中事件总线模式已经被移除，官方建议使用外部的、实现了事件触发器接口的库,例如 mitt

使用 mitt

// 安装mitt
npm install --save mitt

// 创建文件 bus.js 文件，导入 mitt ，并导出一个 mitt 实例
import mitt from 'mitt'; // 导入mitt

const $bus = mitt() // 创建 mitt 实例
 
export default $bus  // 导出

假设我们有组件a、组件b，两个组件
组件a：触发事件
两个参数：name：传递的名称，data：需要传递的参数
emit(name, data)

<template>
  <button @click="add">传递</button>
</template>

<script setup lang='ts'>

import { ref } from 'vue';
import $bus from '../bus/index'

const num = ref(0)
const add = () => {
  $bus.emit('aaa', num.value++)
}
</script>

组件b：接收参数
两个参数：name：传递的名称，cb：收到传参的回调函数，通过参数获取数据
on(name, () => {})

<script setup lang="ts">
import $bus from '../bus/index.js'
import { onMounted } from 'vue';

onMounted(() => {
    $bus.on('aaa', (value) => {
        console.log(value);
    })
})
</script>