vue筆記 - 組件間通信 之 中央事件總線bus


中央事件總線 - 就是一個名字可以叫做bus的vue空實例,里邊沒有任何內容;

var bus = new Vue();

人如其名,她就像一個公交車一樣,來回輸送人,將a站點的A輸送到b站點,再將b站點的B輸送到a站點;

這里a,b站點就像父、子組件,也像兄、弟組件,或者像兩個沒有任何親戚關系的任何組件;

而A,B就像是各個組件內部要傳輸的數據或者要執行的命令信息,靠bus來通信。

 

如果有父子組件通信知識基礎的,應該記得當初父子組件通信,父組件中用$on監聽,子組件中用$emit發射。

現如今父子組件(或任何其他關系的兩個組件之間)達成一致協議:

將監聽和發射的工作交給了bus來搞,就好像他們兩頭不自駕接送了,改乘公交了自己出發自己回家了。

那局面就是下邊這樣

$on和$emit現在綁在bus上了

bus.$emit(‘同名自定義事件名’,‘$on發送過來的數據’);

在a站點(第一個組件)中的methods方法里,准備用bus的$emit發射事件任務。

1 bus.$on(‘自定義事件名’,function(){
2     //然后執行什么你自己懂的。。。
3 });

在b站點(另一個組件)實例初始化(mounted鈎子中)時,用bus的$on監聽自家$emit觸發的事件。

 

 

Bus實例擴展:

可以再添加data、methods、computed等選項,在初始化時讓bus獲取一下,任何組件都可以公用了。就像公交車上的座位,只要有座誰都能坐。

可以包括一些共享通用的信息:比如用戶登錄的姓名、性別、郵箱等,還有油壺授權的token等。(梁灝《vueJs實戰》)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM