vite+ts+vue3 知识点（Mitt 兄弟组件传参）

应用场景：一般用于兄弟组件或不相干的两个组件传参

安装 Mitt

npm install mitt -S

在src文件夹下创建 utils 文件夹 创建 Bus.ts 文件

import mitt from "mitt";
const emiter = mitt();
export default emiter;

父组件

<template>
  <div>
    <Son1></Son1>
    <Son2></Son2>
  </div>
</template>

<script setup lang="ts">
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
</script>

<style scoped lang="less">

</style>

子组件 Son1

<template>
    <div>
        <div class="divBgc">
            子组件1 <button @click="btn">派发事件</button>
        </div>
    </div>
</template>

<script setup lang="ts" name="Father">
import Bus from '../utils/Bus'
let flag = true
const btn = () => {
    flag = !flag
    // 派发自定义事件
    Bus.emit('toSon2', flag)
}
</script>

<style scoped lang="less">
.divBgc {
    width: 200px;
    height: 200px;
    background-color: pink;
}
</style>

子组件 Son2

<template>
    <div>
        <div class="divBgc">我是子组件2-----{{ Son2Flag }}</div>
        <button @click="btnClose">关闭派发事件</button>
        <button @click="btnClear">清除派发事件</button>
    </div>
</template>

<script setup lang="ts" name="Son">
import { ref } from 'vue';
import Bus from '../utils/Bus'
let Son2Flag = ref(true)

// 接收自定义事件传值
Bus.on('toSon2', (res: any) => {
    Son2Flag.value = res
})

const btnClose = () => {
    // 关闭自定义事件
    Bus.off('toSon2')
}

const btnClear = () => {
    // 清除所有自定义事件
    Bus.all.clear()
}
</script>

<style scoped lang="less">
.divBgc {
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
</style>