应用场景:一般用于兄弟组件或不相干的两个组件传参
安装 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>