vue3 使用mitt 实现事物总线

bus.js

import mitt from 'mitt'

const bus = {}

const emitter = mitt()

bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit

export default bus

Bother1.vue

<template>
  <div>
    Bother1
    <a-button @click="sendVal">传值</a-button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

import bus from '@/utils/bus'
export default defineComponent({
  setup () {
    const sendVal = () => {
      bus.$emit('foo', { a: 'b' })
    }
    return {
      sendVal
    }
  }
})
</script>

<style>

</style>

Bother2

<template>
  <div>
    Bother1
    <a-button @click="sendVal">传值</a-button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

import bus from '@/utils/bus'
export default defineComponent({
  setup () {
    const sendVal = () => {
      bus.$emit('foo', { a: 'b' })
    }
    return {
      sendVal
    }
  }
})
</script>

<style>

</style>