Vue3 utiliza el bus de eventos central de Mitt para realizar la comunicación entre componentes (biblioteca de suscripción de publicación)

prefacio

El proyecto actual se actualizó lentamente de Vue 2 a Vue 3. El bus de eventos central que venía antes con Vue 2 era EventBus, que se eliminó en Vue 3. La recomendación oficial es usar la biblioteca de publicación y suscripción de Mitt. Aquí hay un breve registro de cómo se usa Mitt.

1. Dependencias de importación

npm i mitt -D

2. Introducción mundial

(1)/src/main.ts

// 引入Mitt工具并配置为全局方法
import mitt from 'mitt'
app.config.globalProperties.$mittBus = mitt()

3. Código de ejemplo

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

<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

<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

<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>

4. Efecto de operación