站長資訊網(wǎng)
vue3取消了全局事件總線，廢除原因是安全性低。全局事件總線是一個全局任意組件通信技術(shù)，即任意組件間的通信均可實(shí)現(xiàn)。在vue3中，如果想要使用全局事件總線，需要引入第三方庫mitt或tiny-emitter。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
vue3取消了全局事件總線，原因是安全性低。
vue的全局事件總線
全局事件總線，是一個全局任意組件通信技術(shù)。
顧名思義，任意組件間通信，均可實(shí)現(xiàn)。
它通信是通過一個傀儡去實(shí)現(xiàn)的，一個所有組件均可訪問到的傀儡，vue中命名叫 $bus
我們可以直接在 入口文件 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中，取消了全局事件總線，如果想要使用，我們需要引入第三方庫 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
【
