vue3取消了全局事件總線，廢除原因是安全性低。全局事件總線是一個全局任意組件通信技術(shù)，即任意組件間的通信均可實現(xiàn)。在vue3中，如果想要使用全局事件總線，需要引入第三方庫mitt或tiny-emitter。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

vue3取消了全局事件總線，原因是安全性低。

vue的全局事件總線

全局事件總線，是一個全局任意組件通信技術(shù)。

顧名思義，任意組件間通信，均可實現(xiàn)。

它通信是通過一個傀儡去實現(xiàn)的，一個所有組件均可訪問到的傀儡，vue中命名叫 $bus

在vue2中

我們可以直接在 入口文件 mian.js 中使用生命周期鉤子 beforecreated
直接創(chuàng)建 $bus

beforeCreate() { 	Vue.prototype.$bus = this }

記得把鉤子寫在 掛載之前即可。

使用時：

• 在需要接收數(shù)據(jù)的組件中使用 mounted鉤子綁定事件監(jiān)聽

mounted() {   this.$bus.$on('hello',(data) => {     console.log(data);   }) },

• 在需要發(fā)送數(shù)據(jù)的組件中需要發(fā)送的操作中觸發(fā)該方法即可

methods: {   sendStudentName(){     this.$bus.$emit('hello',this.name)   } },

• 還沒完，如果組件銷毀，記得解綁事件，在哪綁定就在哪解綁，使用beforeDestroy鉤子

beforeDestroy() {   this.$bus.$off('hello') },

在vue3

在vue3中，取消了全局事件總線，如果想要使用，我們需要引入第三方庫 mitt或tiny-emitter

1、安裝mitt庫

npm i mitt -s

2、在根目錄封裝一個 js 文件，以便組件中導(dǎo)入使用

文件起名最好見名知義 例如 eventBus.js

內(nèi)容：

//導(dǎo)入 import mitt from 'mitt';  //定義,定義也最好見名知義 const emitter = mitt();  //暴露 export default emitter;

3、使用

1）相互通信的組件均需要導(dǎo)入js

import emitter from '../../eventBus'

2） 接收數(shù)據(jù)的組件 在setup（）中綁定事件監(jiān)聽

setup(){   emitter.on('event',(info) => {     ...   })   return{} }

這里的箭頭函數(shù)，換成普通函數(shù)也可

3）發(fā)送數(shù)據(jù)的組件觸發(fā)即可傳遞數(shù)據(jù)

setup(){ 	function send(info) { 		emitter.emit('event',info) 	) 	return{} }

4）組件銷毀前，解綁事件，

onBeforeUnmount(()=>{ 	emitter.off("event", onEvent); })

如果使用普通函數(shù)，則把該函數(shù)也在第二個參數(shù)的位置，如果是箭頭函數(shù)，則不用寫。如上 onEvent

【