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

本教程操作環境：windows7系統、vue3版，DELL G3電腦。

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

vue的全局事件總線

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

顧名思義，任意組件間通信，均可實現。

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

在vue2中

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

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

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

使用時：

• 在需要接收數據的組件中使用 mounted鉤子綁定事件監聽

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

• 在需要發送數據的組件中需要發送的操作中觸發該方法即可

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 文件，以便組件中導入使用

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

內容：

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

3、使用

1）相互通信的組件均需要導入js

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

2） 接收數據的組件 在setup（）中綁定事件監聽

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

這里的箭頭函數，換成普通函數也可

3）發送數據的組件觸發即可傳遞數據

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

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

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

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

【