前言：

之所以寫(xiě)這篇文章呢，是因?yàn)槲业捻?xiàng)目中遇到的問(wèn)題：
在開(kāi)發(fā)整個(gè)項(xiàng)目之前，沒(méi)有考慮到會(huì)使用到 vuex狀態(tài)管理的這個(gè)特性，所有的操作都是靠本地存儲(chǔ)來(lái)實(shí)現(xiàn)的。本地存儲(chǔ)還是能搞定絕大多數(shù)的問(wèn)題的，比如 賬號(hào)密碼以及token，都是可以存儲(chǔ)的，并且哪里用到那里訪問(wèn)。十分的簡(jiǎn)單有效，但是在項(xiàng)目中有一個(gè)地方遇到了需要兄弟頁(yè)面（同級(jí)頁(yè)面）傳參的場(chǎng)景，接下來(lái)就是我們的場(chǎng)景的介紹了：

業(yè)務(wù)場(chǎng)景：

在我的支付頁(yè)面有一個(gè)選擇地址的功能，一開(kāi)始拿的是默認(rèn)的地址，但是點(diǎn)擊這個(gè)地址是可以跳轉(zhuǎn)到地址選擇頁(yè)面的，在地址頁(yè)面切換地址的操作要在點(diǎn)擊地址卡片的時(shí)候，回退到上一頁(yè)，然后再把地址信息、電話、姓名攜帶到上一頁(yè)（支付頁(yè)面）。到這就會(huì)有同學(xué)講了：這個(gè)簡(jiǎn)單，直接跳轉(zhuǎn)到上一頁(yè)就好了，哪里用的到 同級(jí)頁(yè)面通信 呢？NONONO，你要是這樣想就大錯(cuò)特錯(cuò)了。我們假設(shè)一下： 從支付頁(yè)面到地址頁(yè)面通過(guò) vue的push方法的話，支付頁(yè)面是不是在頁(yè)面棧中已經(jīng)存在了？然后我們?cè)僭?strong>地址頁(yè)面通過(guò) push 還是replace跳轉(zhuǎn)到支付頁(yè)面嗎？回想一下，這樣跳轉(zhuǎn)是不是都不合理呢？ 反正push 這種方法可以首先排除掉， 現(xiàn)在講一下 replace 這個(gè)方法的初衷是替換掉當(dāng)前頁(yè)面！注意是當(dāng)前頁(yè)面，也就是我們的 地址頁(yè)面。我們是可以通過(guò) 路由跳轉(zhuǎn)傳參去實(shí)現(xiàn)，但是你會(huì)發(fā)現(xiàn)你從地址頁(yè)面調(diào)回支付頁(yè)面的時(shí)候，支付頁(yè)面是不是又會(huì)在頁(yè)面棧中出現(xiàn)一次呢？這樣以來(lái)，你要回到 支付的前一個(gè)頁(yè)面 你就要點(diǎn)擊兩次回退按鈕，so，今天我們就要用一下我們 vue 給我們提供的 事件總線（eventBus）了。
vue組件非常常見(jiàn)的有父子組件通信，兄弟組件通信。而父子組件通信就很簡(jiǎn)單，父組件會(huì)通過(guò) props 向下傳遞數(shù)據(jù)給子組件，當(dāng)子組件有事情要告訴父組件時(shí)會(huì)通過(guò)$emit事件告訴父組件。今天就說(shuō)說(shuō)如果兩個(gè)頁(yè)面沒(méi)有任何引用關(guān)系，該如何通信。
因?yàn)槲业捻?xiàng)目的體量不是很大，這里就不說(shuō)vuex了，那就可以考慮使用vue中的事件總線，即 eventBus 來(lái)通信了。

eventBus簡(jiǎn)介：

這個(gè)事件總線，名字起得是不落俗套，但是其實(shí)呢他就是我們常說(shuō)的 設(shè)計(jì)模式 的一種 發(fā)布訂閱者模式：
他是類似于我們訂購(gòu)一份報(bào)紙，只要有新的報(bào)紙出版了，就會(huì)告訴我們，我出版了，訂閱者自然而然就知道有一版新報(bào)紙出版了。

用法：

在我們的 發(fā)布者的頁(yè)面中，我們需要把 發(fā)布信息這個(gè)操作放在 發(fā)布信息頁(yè)面的destoryed（）這個(gè)生命周期里，因?yàn)?，你把這個(gè)事件放在除了 deatoryed（）之外的任何生命周期里，這個(gè)被銷毀的頁(yè)面總是會(huì)調(diào)用這個(gè)destoryed（）這個(gè)生命周期，總是會(huì)阻斷你當(dāng)前生命周期的執(zhí)行，所以把他放在這個(gè)生命周期里是最好的，而在你訂閱者頁(yè)面的時(shí)候，你最好保證，在你訂閱生命周期里先于 發(fā)布生命周期的執(zhí)行，什么意思呢？就是訂閱要發(fā)生在下一次發(fā)布之前，你品你細(xì)品，是不是這個(gè)道理？別人都發(fā)布了你再訂閱是不是你訂閱的都是之前發(fā)布的消息呢？ 所以在你的 訂閱者 on()頁(yè)面你最好在 你的 created（）生命周期里訂閱，為了讓你的訂閱不出現(xiàn)多次訂閱，你最好在你的mounted（）生命周期里把他 $off('事件名') 掉。 假如你發(fā)現(xiàn)你的訂閱老是不更新，你就檢查你到底是不是把生命周期給搞錯(cuò)了?。?/p>

新組件beforeCreate
        ↓
新組件created
        ↓
新組件beforeMount
        ↓
舊組件beforeDestroy
        ↓
舊組件destroyed
        ↓
新組件mounted

我是蠢蛋，還是不會(huì)請(qǐng)私信我！18848882705