官網(wǎng)上的例子好晦澀，看了一個頭兩個大，關于非父子間的通訊問題，經(jīng)過查閱得到了下面的例子，
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>兄弟之間的通訊問題</title> <script src="vue.js"></script></head><body><div id="app"><one></one><two></two></div><script> //創(chuàng)建中央事件總線。 var bus =new Vue();// 組件one Vue.component('one',{ template:'<button v-on:click="oneFn">點擊+</button>', data:function () { return{ oneNum:0 } },// 為組件one創(chuàng)建方法，用來觸發(fā)事件common（common是中央事件總線bus的自定義事件名稱，只需要與two中的監(jiān)聽事件名稱一致即可。 methods:{ oneFn:function () { bus.$emit("common", this.oneNum+=1)//此處的參數(shù)即為two中監(jiān)聽事件中傳入的參數(shù)（n），此處（觸發(fā)）的this指的是組件one，而在（監(jiān)聽）的this指的是bus。 } } });// 組件 two Vue.component('two',{ template:'<p>{{twoNum}}</p>', data:function () { return { twoNum:0 } },// 為組件two創(chuàng)建鉤子，掛載$on監(jiān)聽事件， created:function () { var self = this;//將this賦值給self。 bus.$on('common',function (n) { self.twoNum = n;//此處為self，表示是組件two的變量，若為this，則表示是bus的變量。 }) } });new Vue({ el:'#app'})</script></body></html>我也是新手，剛開始自學Vue，上面有不懂的童鞋請留言，一起進步！
以上所述是小編給大家介紹的vue中的非父子間的通訊問題簡單的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！
新聞熱點
疑難解答
圖片精選
