組件之間的通訊：兄弟組件之間的相互通訊（中央事件總線）
阿新 • • 發佈：2017-08-12
temp logs created str 總線 復雜 log 做的 ted
組件之間的通訊：
父->子:通過props,data屬性，
子->父：通過派發事件
兄弟組件：中央事件總線（......data{ Bus:new Vue()}.....）
更為復雜的通訊：就是用vuex
關於兄弟組件之間的通訊官檔上推薦使用中央事件總線，我們也確實是這樣做的，
中央事件總線，其實就是在父組件data中在實例化話一個vue實例，用於管理組件之間的通訊
假設我們有一個組件A,和B,他們之間的要進行數據通訊，那麽他們之間肯定要建立某種聯系，這個聯系人就是父組件，聯系地址就是中央事件總線
然後A,$emit一個信息，B就$on監聽這個信息
直接上上例子：
首先先建立一個父組件：
const myVue=new Vue({ el:‘#app‘, data:{ Bus:new Vue(),//中央事件總線 }, components:{ myF1:c1,//子組件c1 myF2:c2//子組件c2 } });
給出子組件的代碼：
const c1={ template:`<div> <p>this is c1 組件</p> <span></span> </div>`, created(){//組件的鉤子函數this.$root.Bus.$on(‘你的名字‘,value=>{ this.add(value); }); }, methods:{ add(value){ console.log(value+100); } }, beforeDestory(){//組件的鉤子函數 this.$root.Bus.$off("你的名字"); } }; const c2={ template:`<div> <p>this is c2 組件</p> <p > <button @click="submit">改變</button> </p> <span></span> </div>`, methods:{ submit(){ // this.$root.Bus.$emit(‘eventName‘,123); this.$parent.Bus.$emit(‘你的名字‘,123); }, }, };
組件B，，通過父組件的中央事件總線，$emit派發一個事件"你的名字",以及傳遞一個參數，兄弟組件A,通過父組件的中央事件總線$on，監聽那個派發的事件，並接受那個參數。
沒任何問題。。。。。。
給出代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子組件之間的通信(中央事件總線)</title> <script src="../lib/vue.js"></script> </head> <body> <div id="app"> <my-f1></my-f1> <my-f2></my-f2> </div> </body> </html> <script> const c1={ template:`<div> <p>this is c1 組件</p> <span></span> </div>`, created(){ this.$root.Bus.$on(‘你的名字‘,value=>{ this.print(value); }); }, methods:{ print(value){ console.log(value); } }, beforeDestory(){ this.$root.Bus.$off("你的名字"); } }; const c2={ template:` <div> <p>this is c2 組件</p> <p > <button @click="submit">改變</button> </p> <span></span> </div>`, methods:{ submit(){ // this.$root.Bus.$emit(‘eventName‘,123); this.$parent.Bus.$emit(‘你的名字‘,123); }, }, }; const myVue=new Vue({ el:‘#app‘, data:{ Bus:new Vue(), }, components:{ myF1:c1, myF2:c2 } }); </script>
組件之間的通訊：兄弟組件之間的相互通訊（中央事件總線）