Vue3使用Mitt中央事件总线实现组件之间通讯(发布订阅库)

前言

现在的项目慢慢从 Vue2 升级到 Vue3 了,之前 Vue2 自带的中央事件总线是 EventBus,在 Vue3 中已经被移除了,官方推荐使用 Mitt 发布订阅库。在此简单记录一下 Mitt 的使用方式。

一、示例代码

(1)/src/views/Example/Mitt/index.vue

html 复制代码
<template>
  <div class="mitt">
    <h1>
      <span>主页面</span>
      <p><button @click="handleRemoveAEvent">取消订阅A事件</button></p>
      <p><button @click="handleRemoveBEvent">取消订阅B事件</button></p>
      <p><button @click="handleEmitCEvent">发布C事件</button></p>
      <p><button @click="handleRemoveAllEvent">取消订阅所有事件</button></p>
    </h1>

    <div class="mitt-box">
      <emitA class="mitt-box_A" />
      <emitB class="mitt-box_B" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, getCurrentInstance } from 'vue'
import emitA from './emit_A.vue'
import emitB from './emit_B.vue'

// 代理对象
const { proxy } = getCurrentInstance()

// 消息事件总线
const bus = proxy.$mittBus

// 取消订阅A事件
const handleRemoveAEvent = async () => {
  proxy.$mittBus.off('A_Event')
  console.log('取消订阅A事件 Finished!')
}

// 取消订阅B事件
const handleRemoveBEvent = () => {
  proxy.$mittBus.off('B_Event')
  console.log('取消订阅B事件 Finished!')
}

// 取消订阅所有事件
const handleRemoveAllEvent = () => {
  proxy.$mittBus.all.clear()
  console.log('取消订阅所有事件 Finished!')
}

// 发布C事件
const handleEmitCEvent = () => {
  bus.emit('C_Event', '这是一条来自主页面发布的消息')
}

onMounted(() => {
  // 订阅A事件
  proxy.$mittBus.on('A_Event', (val) => {
    console.log('主页面收到一条信息 =>', val)
  })

  // 订阅B事件
  proxy.$mittBus.on('B_Event', (val) => {
    console.log('主页面收到一条信息 =>', val)
  })
})

onUnmounted(() => {
  handleRemoveAllEvent()
})
</script>

<style lang="less" scoped>
  .mitt {
    display: flex;
    flex-direction: column;
    padding: 100px;

    h1 {
      padding: 20px;
      border: 1px solid #dcdfe6;
      font-weight: lighter;
      text-align: center;
    }

    .mitt-box {
      flex: 1;
      display: flex;
      flex-direction: row;

      .mitt-box_A {
        flex: 1;
        border: 1px solid #dcdfe6;
        text-align: center;
        margin: 7px 3.5px 0 0;
        padding: 20px;
      }

      .mitt-box_B {
        flex: 1;
        border: 1px solid #dcdfe6;
        text-align: center;
        margin: 7px 0 0 3.5px;
        padding: 20px;
      }
    }
  }
</style>

(2)/src/views/Example/Mitt/emit_A.vue

html 复制代码
<template>
  <div>
    <h1 style="font-weight: lighter">
      <span>A页面</span>
    </h1>
    <button @click="fn">发布A事件</button>
  </div>
</template>

<script>
export default {
  data: () => ({

  }),
  created() {

  },
  mounted() {
    this.fn()

    // 订阅C事件
    this.$mittBus.on('C_Event', (val) => {
      console.log('A页面收到一条信息 =>', val)
    })
  },
  methods: {
    fn() {
      // 发布A事件
      const bus = this.$mittBus
      const data = {
        success: true,
        data: 'OK',
        msg: '这是来自A页面的一条信息'
      }
      bus.emit('A_Event', data)
    }
  }
}
</script>

(3)/src/views/Example/Mitt/emit_B.vue

html 复制代码
<template>
  <div>
    <h1 style="font-weight: lighter">
      <span>B页面</span>
    </h1>
    <button @click="fn">发布B事件</button>
  </div>
</template>

<script>
export default {
  data: () => ({

  }),
  created() {

  },
  mounted() {
    this.fn()

    // 订阅C事件
    this.$mittBus.on('C_Event', (val) => {
      console.log('B页面收到一条信息 =>', val)
    })
  },
  methods: {
    fn() {
      // 发布B事件
      const bus = this.$mittBus
      const data = {
        success: true,
        data: 'OK',
        msg: '这是来自B页面的一条信息'
      }
      bus.emit('B_Event', data)
    }
  }
}
</script>

二、运行效果

相关推荐
恋猫de小郭19 分钟前
JetBrains Terminal 又发布新架构,Android Studio 将再次迎来新终端
android·前端·flutter
夕秋一梦1 小时前
vue项目本地调试使用https
前端·vue.js·https
小破孩呦1 小时前
动态列表的数据渲染、新增、编辑等功能开发及数据处理
前端·javascript·elementui
成长ing121381 小时前
点击音效系统
前端·cocos creator
熟悉不过1 小时前
cesium项目之cesiumlab地形数据加载
前端·javascript·vue.js·cesium·webgis·cesiumlab
神经毒素2 小时前
WEB安全--XSS--DOM破坏
前端·web安全·xss
不简说2 小时前
sv-print可视化打印组件不完全指南③
前端·javascript·vue.js
前端摸鱼杭小哥2 小时前
Vue 开发者狂喜!我在 React 中完美复刻了 v-if/v-for 指令
前端·vue.js·react.js
kovli2 小时前
红宝书第四讲:JavaScript原始值与引用值行为差异详解
前端·javascript