公共事件總線eventBus的實(shí)質(zhì)就是創(chuàng)建一個(gè)vue實(shí)例，通過(guò)一個(gè)空的vue實(shí)例作為橋梁實(shí)現(xiàn)vue組件間的通信。它是實(shí)現(xiàn)非父子組件通信的一種解決方案。

用法如下：

第一步：項(xiàng)目中創(chuàng)建一個(gè)js文件（我通常給它取個(gè)名字為bus.js），引入vue，創(chuàng)建一個(gè)vue實(shí)例，導(dǎo)出這個(gè)實(shí)例，代碼如下（一共就兩行）：

?

1 import Vue from 'Vue' 2 export default new Vue 第二步：在兩個(gè)需要通信的兩個(gè)組件中分別引入這個(gè)bus.js 1 import Bus from '這里是你引入bus.js的路徑' // Bus可自由更換喜歡的名字? 第三步：傳遞數(shù)據(jù)的組件里通過(guò)vue實(shí)例方法$emit發(fā)送事件名稱和需要傳遞的數(shù)據(jù)。(發(fā)送數(shù)據(jù)組件) 1 Bus.$emit('click',data) // 這個(gè)click是一個(gè)自定義的事件名稱，data就是你要傳遞的數(shù)據(jù)。? 第四步：被傳遞數(shù)據(jù)的組件內(nèi)通過(guò)vue實(shí)例方法$on監(jiān)聽(tīng)到事件和接受到數(shù)據(jù)。（接收數(shù)據(jù)的組件）這里通常掛載監(jiān)聽(tīng)在vue生命周期created和mounted當(dāng)中的一個(gè)，具體使用場(chǎng)景需要具體的分析，這里不說(shuō)這個(gè)。 1 Bus.$on('click',target => { 2 　　console.log(target)　　//　注意：發(fā)送和監(jiān)聽(tīng)的事件名稱必須一致，target就是獲取的數(shù)據(jù)，可以不寫target。只要你喜歡叫什么都可以（當(dāng)然了，這一定要符合形參變量的命名規(guī)范） 3 }) 通過(guò)以上的四步其實(shí)就已經(jīng)實(shí)現(xiàn)了最簡(jiǎn)單的eventbus的實(shí)際應(yīng)用了。 但是到這兒后，一定要注意一個(gè)最容易忽視，又必然不能忘記的東西，那就是清除事件總線eventBus. 不手動(dòng)清除，它是一直會(huì)存在的，這樣的話，有個(gè)問(wèn)題就是反復(fù)進(jìn)入到接受數(shù)據(jù)的組件內(nèi)操作獲取數(shù)據(jù)，原本只執(zhí)行一次的獲取的操作將會(huì)有多次操作。如上我所舉的例子，只是打印多次傳過(guò)來(lái)的數(shù)據(jù)。但你想想，實(shí)際開(kāi)發(fā)中是不會(huì)這么簡(jiǎn)單的打印這個(gè)數(shù)據(jù)到控制臺(tái)，本來(lái)只會(huì)觸發(fā)并只執(zhí)行一次，現(xiàn)在變成了多次，這個(gè)問(wèn)題就非常嚴(yán)重了，你們各種腦補(bǔ)具體的項(xiàng)目開(kāi)發(fā)場(chǎng)景吧。 第五步：在vue生命周期beforeDestroy或者destroyed中用vue實(shí)例的$off方法清除eventBus 1 beforeDestroy(){ 2 bus.$off('click') 3 }

?

總結(jié)一下，這里只是介紹如何使用eventBus來(lái)解決非父子組件通信，但是當(dāng)項(xiàng)目較大較復(fù)雜時(shí)，并不適合。到那時(shí)，vuex才是vue給我們提供的最理想的方式。

注意：以上存粹是個(gè)人的理解，有不同觀點(diǎn)或者其他建議的歡迎交流學(xué)習(xí)！

轉(zhuǎn)載于:https://www.cnblogs.com/singerlee-changealive/p/10519822.html

總結(jié)

以上是生活随笔為你收集整理的vue中央事件总线eventBus的简单理解和使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。