Vue2.x使用EventBus進行組件通信，而Vue3.x推薦使用mitt.js。

比起Vue實例上的EventBus，mitt.js好在哪裡呢？首先它足夠小，僅有200bytes，其次支持全部事件的監聽和批量移除，它還不依賴Vue實例，所以可以跨框架使用，React或者Vue，甚至jQuery項目都能使用同一套庫。

安裝

• 使用yarn安裝

yarn add mitt

• 或者通過npm安裝

npm install --save mitt

官方使用案例

import mitt from 'mitt'

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })

// clearing all events
emitter.all.clear()

// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

示例

• 可以封裝一個ES模塊，對外暴露一個mitt實例

// src/common/bus.js

// 引入mitt插件
import mitt from 'mitt';
const $bus = mitt();
export default $bus;

• 掛載到Vue全局變數上

// src/main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import $bus from './bus/index.ts'

const app = createApp(App);
app.config.globalProperties.$bus = $bus;

app.mount('#app');

• 在父組件中使用

// src/App.vue

<template>
  <div>
    <button @click="giveMoney(200)">打錢</button>
    <Son></Son>
  </div>
</template>

<script lang="ts" setup>
import Son from './components/son.vue';
import { getCurrentInstance } from 'vue';

const { proxy }: any = getCurrentInstance();
const $bus = proxy.$bus;

function giveMoney(num: number) {
	// 通過emit方法觸發
  $bus.emit('add', num);
}
</script>

• 在子組件中使用

// src/components/son.vue

<template>
    <div>
        <h2>I am son</h2>
        <p>我收到了{{ money || 0 }}￥</p>
    </div>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue';

const { proxy }: any = getCurrentInstance();
const $bus = proxy.$bus;

const money = ref(0);

// 通過on方法監聽
$bus.on('add', (number: number) => {
    // console.log(number);
    money.value = number;
});
</script>

• 移除事件

// src/App.vue

<button @click="$bus.off('add')">卸載bus匯流排</button>
<button @click="$bus.all.clear()">卸載所有bus匯流排</button>