vue3中如何实现事件总线eventBus

沉迷...

已于 2023-12-02 13:34:43 修改

阅读量1.8k

点赞数 14

分类专栏： vue3 前端文章标签：前端 javascript vue.js vue

于 2023-12-02 13:30:23 首次发布

本文链接：https://blog.csdn.net/weixin_42343307/article/details/134751138

版权

前端同时被 2 个专栏收录

56 篇文章

订阅专栏

26 篇文章

订阅专栏

本文介绍了在Vue3中，由于官方移除了$on、$off和$once方法，作者推荐使用mitt第三方库来实现代理事件。文章详细讲解了如何安装并全局挂载mitt，以及在组件间通过事件总线进行通信的方法和示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用插件

由于vue3中 “$ on”，$ off 和 $ once 实例方法已被移除，组件实例不再实现事件触发接口所以我们可以使用官方推荐的这个第三方库实现同样的效果
mitt https://github.com/developit/mitt

安装

pnpm install mitt -S

挂载全局写法

main.ts 初始化
全局总线，vue 入口文件 main.js 中挂载全局属性

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入animate动画
import 'animate.css';
//挂载事务总线
import mitt from 'mitt'
const app = createApp(App)
const miTT = mitt()
//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
  export interface ComponentCustomProperties {
      $bus: typeof miTT
  }
}

app.config.globalProperties.$bus = miTT

app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')

父组件

<template>
  <A></A>
  <B></B>
</template>

<script setup lang="ts">
import A from './components/A.vue'
import B from './components/B.vue'
</script>

<style scoped>

</style>

组件A

<template>
  <div style="margin-right: 30px;">
    <h1>派发组件</h1>
     <button @click="emitIndex">派发事件</button>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
// vue实例
const vm = getCurrentInstance();
 const emitIndex = () => {
  // self.console.log(123,vm)
  vm?.proxy?.$bus.emit('on-click', 1)
 }
</script>

<style scoped>

</style>

组件B

<template>
  <div>
   <h1>接收组件</h1>
   <div>接收的值{{ bData }}</div>
  </div>
 </template>
 
 <script setup lang="ts">
 import { getCurrentInstance,ref } from 'vue'
  const vm = getCurrentInstance()
  let bData = ref<Number>(0)
  vm?.proxy?.$bus.on('on-click', (num) => {
      bData.value += num
      console.log(num,'===========>B')
  })
 </script>
 
 <style scoped>
 
 </style>

效果如下

点击按钮 b组件中的数值增加

在这里插入图片描述
监听所有事件（ on(“*”) ）

vm?.proxy?.$bus.on('*', (num) => {
      bData.value += num
      console.log(num,'===========>B')
  })

移除监听事件（off）

vm?.proxy?.$Bus.on('on-click',Fn)//listen
vm?.proxy?.$Bus.off('on-click',Fn)//unListen

清空所有监听（clear）

vm?.proxy?.$Bus.all.clear()