>[success] # 全局事件總線mitt庫 1. Vue3從實例中移除了 `$on`、`$off `和` $once` 方法,Vue3官方有推薦一些庫，例如[mitt](https://github.com/developit/mitt)或[tiny-emitter](https://github.com/scottcorgan/tiny-emitter)。 2. 之前使用 [Bus](http://www.hmoore.net/cyyspring/vuejs/943729)，實現方法也已經失效，因為之前bus 使用的是vue 實例上的 `$on` 方法進行分發 3. [mitt](https://github.com/developit/mitt)或[tiny-emitter](https://github.com/scottcorgan/tiny-emitter)。主要作用是**可以跨組件層級傳值，或者跨越兄弟組件傳值** [參考vue 使用`$on`](http://www.hmoore.net/cyyspring/vuejs/1009440) >[danger] ##### 使用案例 安裝`npm install tiny-emitter` * 在 src/utils 文件目錄創建了`event-bus.js` ~~~ import emitter from 'tiny-emitter/instance' // 封裝一層 名字更像以前的 bus export default { $on: (...args) => emitter.on(...args), $once: (...args) => emitter.once(...args), $off: (...args) => emitter.off(...args), $emit: (...args) => emitter.emit(...args), } ~~~ * 在子組件(兄弟組件/孫子組件) ~~~ <template> <div> {{ msg }} </div> </template> <script> import bus from '@/utils/event-bus' export default { name: 'HelloWorld', data() { return { msg: '123', } }, methods: { changeMsg(msg) { this.msg = msg }, }, mounted() { // 注冊觸發事件 bus.$on('changeMsg', this.changeMsg) }, unmounted() { // 銷毀觸發事件 bus.$off('changeMsg', this.changeMsg) }, } </script> ~~~ * 父組件調用 ~~~ <template> <HelloWorld /> <button @click="parentChange">改變</button> </template> <script> import HelloWorld from './components/HelloWorld.vue' import bus from '@/utils/event-bus' export default { name: 'App', components: { HelloWorld, }, methods: { parentChange() { bus.$emit('changeMsg', '789') }, }, } </script> <style></style> ~~~ >[info] ## 官網對應 [參考](https://v3-migration.vuejs.org/zh/breaking-changes/events-api.html)