Vue3中Mitt的使用

Vue中使用Mitt

Mitt是一個在Vue.js應用程序中使用的小型事件總線庫。該庫允許組件進行通信，而不必過度依賴父級或子級組件之間的props。

Mitt的特性和功能介紹

• 輕量級: Mitt只有200字節大小，不會增加你的應用程序的負擔
• 方便易用：只需要引入mitt並配置即可使用
• 支持任何Javascript環境：Mitt支持在任何Javascript環境下使用，不僅限於Vue
• 應用場景：組件通信

引入Mitt

安裝依賴

執行安裝命令

npm install --save mitt

在src目錄下面，新建/libs/bus.js，內容如下：

// 事件總線第三方庫：
    import mitt from 'mitt'

    const bus = mitt()
    export default bus

使用

    import bus from '@/libs/bus.js'

    //in component A 觸發
    bus.emit('event-name', eventData)

    //in component B 監聽
    bus.on('event-name', eventData => { /* do something with eventData */ })