Vue3 bus 事件总线解决兄弟组件传参、不同层级组件传参

VUE3 bus 事件总线通信

😎Hello朋友你好！我是一名西安电子科技大学在校学生，🍉目前主要在做web方向，前端居多，别的方向也有尝试。
如果对博客内容有疑问，或者有想法，🎉欢迎私信或评论，看到一定会回复、尽力为大家解决问题！
如果你对web感兴趣，也欢迎👏一起交流讨论，比如学习路线、项目经验、技术点等等。
同时我会不定期写一些学习心得🦀、技术教程、项目教学等博客，希望能丰富大家的👉技术视野。
技术不易，我们，继续努力👏！

Vuex 和 Pinia 都是 vue 中常用的状态管理解决方案。但是他们主要都是用来解决不同组件公用参数或存放重要参数的，将其作为传参的方式，未免有些不妥和浪费，所以我们还可以使用另一种方式进行组件之间的传参：事件总线 bus

使用场景

假定有这么一个场景：父组件A下有两个子组件a1，a2，a1为导航组件，a2为展示区。

当a1组件中选择了导航，需要展示区发生改变时，通信需要绕过父组件：子组件a1通过 emit 将参数传递给父组件A，A再更新对应变量，然后将该变量作为 props 传递给子组件a2。

上面的过程完全不需要通过父组件，这样会导致父组件中出现冗余代码。所以可以使用事件总线进行通信。

EventBus

事件总线称为bus。vue2中该通信方式直接集成在vue上，而vue3中，该功能被提出来，单独封装成库，所以当前需要先下载 mitt 库，然后使用。

npm install mitt

封装

下载完成后，在src/utils/bus.js中进行封装：

import mitt from 'mitt'
const bus = mitt()

export default bus

之后在别的组件中导入该bus对象即可使用。

使用

还是通过“使用场景”中的例子进行说明：
子组件a1中：

import bus from "@/utils/bus";

onMounted(() => {
    bus.emit('事件名', 传参)
})

// 还可以当某事件发生时触发
const click = () => {
    bus.emit('事件名', 传参)
}

子组件a2中：

import bus from '@/utils/bus';

// 生命周期中监听
onMounted(()=> {
  bus.on('事件名', (e) => {
    // 传参由回调函数中的形参接受
    console.log(e)
  })
})

上面需要注意的：

• a1发布和a2监听的事件名需要一致