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實戰》）