###### tags: `Vue` `mitt`
{%hackmd BJrTq20hE %}
# 如何在Vue cli 中全域註冊並使用mitt 套件
## 1. 安裝mitt套件
[mitt網頁](https://www.npmjs.com/package/mitt)
1-1 在VS code中按下ctrl+`,輸入下行指令

npm install mitt

## 2. import mitt
### 2-1 在main.js下import，範例如下。

import { createApp } from 'vue'
import mitt from 'mitt'
const emitter = mitt()
const app = createApp(App)
app.mount('#app')

## 3. 全域註冊
### 3-1使用app.config.globalProperties進行全域註冊。

import { createApp } from 'vue'
import mitt from 'mitt'
const emitter = mitt()
const app = createApp(App)
app.config.globalProperties.$emitter = emitter
app.mount('#app')

## 4. 如何使用
### 4-1 傳送資料

this.$emitter.emit('senddata', data)

### 4-2 接收資料

this.$emitter.on('senddata', (data) => { this.place = data })

(data) => { this.place = data }, 可以用其他函式接收資料,或執行其他函示 () => { this.要執行的函示 }。

參考資料
---
[Vue3 使用 Mitt 替代 EventBus](https://www.youmelive.com/keji/code/156616.html)
[不只懂 Vue 語法：試說明有哪些方式可以全域註冊方法？](https://ithelp.ithome.com.tw/articles/10278887)