快捷導(dǎo)航

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

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

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

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

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

什么是mitt？

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

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

如何在 Vue 3 中使用mitt？

1、安裝mitt

首先，我們需要通過(guò) npm 安裝 mitt：

npm i mitt

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

接下來(lái)，我們創(chuàng)建一個(gè)事件總線實(shí)例

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實(shí)現(xiàn)原理

miit的原理其實(shí)非常簡(jiǎn)單，主要依賴于一個(gè) Map 對(duì)象來(lái)存儲(chǔ)事件類型及其對(duì)應(yīng)的處理函數(shù)。以下是mitt的簡(jiǎn)化實(shí)現(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)
            })
        }
    }
}

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

您可能感興趣的文章: