組件之間的通訊：
父->子:通過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.$parent.Bus.$on('你的名字',value=>{ this.print(value); }); }, methods:{ print(value){ console.log(value); } }, beforeDestory(){ //this.$root.Bus.$off("你的名字");
this.$parent.Bus.$off("你的名字"); //值得說一句的是，這個$root就是$parent ，建議還是寫成$parent } }; 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>
以上的例子存在一個問題就是，假如子組件被多個組件調用，那么 this.$parent.Bus.$emit('你的名字',123);這句話可能會報錯
尤其是在一個較復雜的項目中組件是會被進程的引用。
這時候我們可以在main.js中進行
Vue.prototype.bus = new Vue();
每一次使用時候只需要
this.bus.$emit("....",'.....');
一般來，中央事件總線使用來兄弟組件之間的相互通信，其實也可用於父子組件的相互通信
子組件：ratingselect.vue
toggleContent(event){ if(!event._constructed){ return ; } this.onlyContent=!this.onlyContent; this.bus.$emit('content.toggle',this.onlyContent); }
父組件：good.vue
created(){ this.bus.$on('content.toggle',(e)=>{ console.log(e); }); },
父子組件之間的更好通信方式：純粹的事件派發
子組件：
this.$emit('modalIsShow', this.showModal)
調用子組件的父組件：
<selfModal ref="forgetPwdModal" v-on:modalIsShow="modalIsShowLoan">
modalIsShowLoan () {
console.log("派發事件給父組件啦")
}
怎么在父組件中獲悉子組件的生命周期函數：
下面的代碼就是在父組件中申明子組件的created函數
<template> <child @hook:created="handelChildCreated"></child> </template> methods: { handelChildCreated () { console.log('this is childCreated') } }