---
# System prepended metadata

title: Vue學習#20  Mitt 跨元件資料傳遞（Event Bus）
tags: [Vue 直播班 - 2022 春季班]

---

# Vue學習#20  Mitt 跨元件資料傳遞（Event Bus）
###### tags: `Vue 直播班 - 2022 春季班`

## [套件傳送門](https://github.com/developit/mitt)

## 介紹 mitt
`props` 跟 `emit` 兩種元件溝通方式僅次跨一層元件溝通，如果兩個元件不是父與子關係

## 使用方法

STEP1 : 建立 mitt 套件實體

![](https://i.imgur.com/Jw3mAf8.png)

STEP2 : 在要發送的元件啟動發送事件
使用 mitt 的 emit 來發送，跟使用 emit 一樣要定義名稱，並且帶入想帶的參數

![](https://i.imgur.com/Vr0NVUr.png)

STEP3 : 在另一個元件做接收事件
使用 mitt 的 on 來做接收， emit 名稱需要跟發送方的名稱相同

![](https://i.imgur.com/Oha8o05.png)



### [mitt傳遞資料範例](https://codepen.io/binlandz123/pen/rNpEZeP)