中央事件總線 - 就是一個名字可以叫做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實戰》)