VUE 3移除了Events API

vue2 可以使用$on, $off ，$once 進行元件間通信，雖然不建議使用全局event bus進行元件間通信，但一定情況下還是很友善的

//eventBus.js 
const eventBus = new Vue() 
export default eventBus           

// a.vue 
import eventBus from './eventBus' 
export default { 
 mounted() { 
  eventBus.$on('a-event',
   () => { console.log('a') }) },
 beforeDestroy() { 
  eventBus.$off('a-event') }
}           

// b.vue 
import eventBus from './eventBus' 
export default { 
 methods: { 
  //b元件調用這個方法時候
  //a元件就會列印'a'
  call() { 
   eventBus.$emit('a-event')  
  }
 }
}           

但在vue3中已經完全删除了$on, $off ，$once這三個方法

官方推薦使用第三方庫 mitt 或者 tiny-emitter

官方給出了更新方案---

// eventBus.js 
import mitt from 'mitt' 
export default { 
	$on: (...args) => mitt.on(...args),
	$once: (...args) => mitt.once(...args), 
	$off: (...args) => mitt.off(...args),
	$emit: (...args) => mitt.emit(...args)
}           

平時項目中我們可以單獨使用mitt 還蠻友善的

<script src="./mitt.js"></script>
<script>
var mitt=mitt()
mitt.on('go',function(param){
 console.log(param)
})
mitt.on('go',function(param){
 console.log('go'+param)
})
</script>
<script>
 mitt.emit('go','to')
 console.log(mitt)
</script>           

看看mitt源碼編譯成js才幾十行