Vue3 數(shù)據(jù)總線的實現(xiàn)

更新時間：2026年04月05日 09:29:01 作者：幻象黑兔

在Vue3中,可以使用mitt實現(xiàn)事件總線,mitt是一個輕量級的事件發(fā)布/訂閱庫,核心功能包括發(fā)布事件、訂閱事件和取消訂閱,下面就來介紹一下如何使用,感興趣的可以了解一下

在 Vue 開發(fā)中，組件通信 是一個非常重要的主題。對于父子組件之間的通信，我們可以通過 props/emit 來實現(xiàn)。然而，在非父子組件或兄弟組件之間進行通信時，傳統(tǒng)的 props/emit 就顯得力不從心了。這時，事件總線（Event Bus）就派上了用場。

在 Vue 2 中，我們可以通過 new Vue() 創(chuàng)建一個事件總線實例，并使用 $emit、$on 和 $off 來實現(xiàn)事件的發(fā)布與訂閱。然而，在 Vue 3 中，這些 API 被移除了。幸運的是，我們可以借助一個輕量級的開源庫 —— mitt 來實現(xiàn)類似的功能。

什么是mitt？

mitt 是一個極簡的JavaScript事件發(fā)布/訂閱庫，體積僅有200字節(jié)左右，但卻功能強大。它可以在任何 JavaScript 環(huán)境中使用，包括 Vue、React 甚至原生 JS。mitt 的核心功能非常簡單：

發(fā)布事件：通過 emit 方法觸發(fā)事件。
訂閱事件：通過 on 方法監(jiān)聽事件。
取消訂閱：通過 off 方法移除事件監(jiān)聽器。

如何在 Vue 3 中使用mitt？

1、安裝mitt

首先，我們需要通過 npm 安裝 mitt：

npm i mitt

2、創(chuàng)建事件總線

接下來，我們創(chuàng)建一個事件總線實例

import mitt from "mitt";

const emitter = mitt();
export default emitter;

3、在組件中訂閱事件

<template>
  <div>
    <div>Bar: {{ date }}</div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from 'vue';
import emitter from './emitter';

const date = ref()
onMounted(() => {
  emitter.on('bar', (data) => {
    date.value = data
  })
})

onBeforeMount(() => {
  emitter.off('bar')
})
</script>

4、在組件中發(fā)布事件

// Foo.vue
<template>
  <div>
    <span>Foo: </span>
    <button @click="click">觸發(fā)事件</button>
  </div>
</template>
<script setup lang="ts">
import emitter from './emitter';

function click() {
  emitter.emit('bar', new Date().toLocaleString());
}
</script>

mitt實現(xiàn)原理

miit的原理其實非常簡單，主要依賴于一個 Map 對象來存儲事件類型及其對應的處理函數(shù)。以下是mitt的簡化實現(xiàn):

function mitt() {
    const all = new Map();
    return {
        // 訂閱事件
        on(type, handler) {
            const handlers = all.get(type)
            if (handlers) {
                handlers.push(handler)
            } else {
                all.set(type, [handler])
            }
        },
        // 取消訂閱
        off(type, handler) {
            const handlers = all.get(type)
            if (!handlers) {
                return
            }
            if (handler) {
                const index = handlers.indexOf(handler)
                if (index > -1) {
                    handlers.splice(index, 1)
                }
            } else {
                all.set(type, [])
            }
        },
        // 發(fā)布事件
        emit(type, ...args) {
            const handlers = all.get(type);
            handlers?.slice().map(handler => {
                handler(...args)
            })
        }
    }
}

到此這篇關于Vue3 數(shù)據(jù)總線的實現(xiàn)的文章就介紹到這了,更多相關Vue3 數(shù)據(jù)總線內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: