Vue3 使用 Event Bus

本文已整理到 Github，地址 👉 blog。

如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~

我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。

在 Vue2 中，创建 Event Bus 如下：

export const bus = new Vue()

1.  
   bus.$on(...)
2.  
   bus.$emit(...)

在 Vue3 中，Vue 不再是构造函数，而是 Vue.createApp({}) 返回一个没有 $on、$emit 和 $once 方法的对象。

根据官方文档 Vue 3 迁移指南所建议的，我们可以使用 mitt 或 tiny-emitter 库在组件之间调度事件。

这里我们使用 mitt，它的源码也很简单，👉 地址。

安装

pnpm i mitt

您也可以单独把代码拷贝一份到项目，代码量较少。

用法

与 Vue2 一样，封装为 myBus.js：

1.  
   import mitt from 'mitt'
2.  
   export default mitt()

或者，你也可以定义为全局变量：

1.  
   import { createApp } from 'vue'
2.  
   import App from './App.vue'
3.  
   import mitt from 'mitt'
4.  
    
5.  
   const app = createApp(App)
6.  
   app.config.globalProperties.emitter = mitt()

然后，封装一个 hooks：

1.  
   // src/hooks/useEmitter.js
2.  
   import { getCurrentInstance } from 'vue'
3.  
    
4.  
   export default function useEmitter() {
5.  
   const internalInstance = getCurrentInstance()
6.  
   const emitter = internalInstance.appContext.config.globalProperties.emitter
7.  
    
8.  
   return emitter
9.  
   }

当然，为了方便管理，你也可以在需要用到的地方单独引入 mitt。

示例

假设我们有一个 sidebar 和 header，其中包含一个关闭/打开侧栏的按钮，我们需要该按钮来切换侧边栏组件内的某些属性。

点击按钮发出 toggle-sidebar 带有一些 payload 的事件：

1.  
   <template>
2.  
   <button @click="toggleSidebar">toggle</button>
3.  
   </template>
4.  
   <script setup>
5.  
   import { ref } from 'vue'
6.  
   import useEmitter from '@/hooks/useEmitter'
7.  
    
8.  
   const sidebarOpen = ref(true)
9.  
   const emitter = useEmitter()
10.  
     
11.  
    const toggleSidebar = () => {
12.  
    sidebarOpen.value = !sidebarOpen.value
13.  
    emitter.emit('toggle-sidebar', sidebarOpen.value)
14.  
    }
15.  
    </script>

在侧边栏中接收带有 payload 的事件：

1.  
   <template>
2.  
   <aside class="sidebar" :class="{'sidebar--toggled': !isOpen}">
3.  
   {{ isOpen }}
4.  
   </aside>
5.  
   </template>
6.  
   <script setup>
7.  
   import { ref, onMounted } from 'vue'
8.  
   import useEmitter from '@/hooks/useEmitter'
9.  
    
10.  
    const isOpen = ref(true)
11.  
    const emitter = useEmitter()
12.  
     
13.  
    onMounted(() => {
14.  
    emitter.on('toggle-sidebar', (isOpen) => {
15.  
    isOpen.value = isOpen
16.  
    })
17.  
    })
18.  
    </script>

更多资料

实现一个 Event Bus