概述
(1)vue2的事件总线event bus到vue3就被移除了,vue3需要通过第三方库mitt实现此通信
(2)采用发布订阅模式,可以一对多发送消息,只要监听了事件都可以获得对应消息;例如A组件发布了消息,那么想要获取这个消息的组件可以是很多个,只要监听了就能获取到
(3)适用于简单的非父子关系组件的通信,例如兄弟组件,复杂场景建议使用vuex
安装
npm install mitt -s
使用
(1) 通常在项目的utils文件夹中新建一个js文件,例如utils/eventBus.js
(2)分发方
<template>
<div>
<h1>分发方</h1>
<button @click="sending">点我分发数据</button>
</div>
</template>
<script setup>
import Bus from '../../utils/eventBus'
// 接收消息方法
const sending = () => {
// 分发数据出去
Bus.emit('sendMsg', '这是要发送的数据')
}
</script>
(3)接收方
<template>
<h1 style="margin-top: 50px;">接收方</h1>
</template>
<script setup>
import { onMounted } from 'vue';
import Bus from '../../utils/eventBus'
onMounted(() => {
receive()
})
// 接收消息方法
const receive = () => {
// 监听sendMsg传递过来的数据并做处理
Bus.on('sendMsg', (res) => {
console.log('res', res);
})
}
</script>
(4)测试文件
<template>
<div>
<child-one></child-one>
<child-two></child-two>
</div>
</template>
<script setup>
import ChildOne from './childOne.vue'
import ChildTwo from './childTwo.vue'
</script>
(5)测试结果
于是点击分发组件按钮,触发分发事件;那么接收方组件,监听获取事件的方法体,会打印出获取到的数据