представлять
- Vue3 удалил пользовательские методы, связанные с событиями, такие как $on $off, поэтому в vue3 он рекомендовал нам загрузить библиотеку mitt, чтобы использовать шину событий для передачи данных.
Установить
npm install mitt
использовать
1. Определите библиотеку инструментов
src/bus/index.ts
//引入mitt插件:mitt一个方法,方法执行会返回bus对象
import mitt from 'mitt';
const $bus = mitt();
export default $bus;
2. Используется в компонентах
假设Child1 和 Child2 是兄弟组件,2需要给1传过去一辆车的信息可以这样定义
Получатель (Ребенок 1):
<template>
<div class="child1">
<h3>我是子组件1:曹植</h3>
</div>
</template>
<script setup lang="ts">
import $bus from "../../bus";
//组合式API函数
import {
onMounted } from "vue";
//组件挂载完毕的时候,当前组件绑定一个事件,接受将来兄弟组件传递的数据
onMounted(() => {
//第一个参数:即为事件类型 第二个参数:即为事件回调
$bus.on("car", (car) => {
console.log(car);
});
});
</script>
<style scoped>
.child1 {
width: 300px;
height: 300px;
background: hotpink;
}
</style>
Отправитель (ребенок 2):
<template>
<div class="child2">
<h2>我是子组件2:曹丕</h2>
<button @click="handler">点击我给兄弟送一台法拉利</button>
</div>
</template>
<script setup lang="ts">
//引入$bus对象
import $bus from '../../bus';
//点击按钮回调
const handler = ()=>{
$bus.emit('car',{
car:"法拉利"});
}
</script>
<style scoped>
.child2{
width: 300px;
height: 300px;
background: skyblue;
}
</style>
демо-результаты
Vue3 реализует глобальную шину событий через рукавицу