Vue3 使用 Event Bus

简介: Vue3 使用 Event Bus

在 Vue2 中,创建 Event Bus 如下:

export const bus = new Vue()
bus.$on(...)
bus.$emit(...)

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

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

这里我们使用 mitt,它的源码也很简单

安装

pnpm i mitt

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

用法
与 Vue2 一样,封装为 myBus.js:

import mitt from 'mitt'
export default mitt()

或者,你也可以定义为全局变量:

import {
    createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

const app = createApp(App)
app.config.globalProperties.emitter = mitt()

然后,封装一个 hooks:

// src/hooks/useEmitter.js
import {
    getCurrentInstance } from 'vue'

export default function useEmitter() {
   
  const internalInstance = getCurrentInstance()
  const emitter = internalInstance.appContext.config.globalProperties.emitter

  return emitter
}

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

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

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

<template>
  <button @click="toggleSidebar">toggle</button>
</template>
<script setup>
  import {
    ref } from 'vue'
  import useEmitter from '@/hooks/useEmitter'

  const sidebarOpen = ref(true)
  const emitter = useEmitter()

  const toggleSidebar = () => {
   
    sidebarOpen.value = !sidebarOpen.value
    emitter.emit('toggle-sidebar', sidebarOpen.value)
  }
</script>

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

<template>
  <aside class="sidebar" :class="{'sidebar--toggled': !isOpen}">
    {
   {
    isOpen }}
  </aside>
</template>
<script setup>
  import {
    ref, onMounted } from 'vue'
  import useEmitter from '@/hooks/useEmitter'

  const isOpen = ref(true)
  const emitter = useEmitter()

  onMounted(() => {
   
    emitter.on('toggle-sidebar', (isOpen) => {
   
      isOpen.value = isOpen
    })
  })
</script>
相关文章
|
4天前
|
JavaScript API 开发者
关于vue3中v-model做了哪些升级 ?
【10月更文挑战第1天】
106 59
|
1天前
|
开发者
vue3生命周期钩子变化
【10月更文挑战第4天】
|
2天前
|
存储
Vue3组件通讯六种方式
【10月更文挑战第3天】
12 3
|
2天前
|
缓存 JavaScript
|
2天前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
97 2
|
2天前
|
JavaScript API
|
1天前
|
JavaScript API 开发工具
vue2和vue3版本区别
【10月更文挑战第4天】
|
1天前
|
缓存 JavaScript 算法
Vue3新特性合集
Vue3新特性合集
10 0
|
3天前
|
资源调度 JavaScript PHP
Vue3+ element plus 前后分离admin项目安装教程
Vue3+ element plus 前后分离admin项目安装教程
8 0
|
4天前
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
10 0