vue中的非父子間的通訊問題簡單的實例代碼
更新時間:2017年07月19日 11:37:21 作者:有一個王小森
這篇文章主要介紹了vue中的非父子間的通訊問題簡單的實例代碼,需要的朋友可以參考下
官網(wǎng)上的例子好晦澀,看了一個頭兩個大,關(guān)于非父子間的通訊問題,經(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)站的支持!
相關(guān)文章
前端vue面試總問watch和computed區(qū)別及建議總結(jié)
在現(xiàn)代前端的面試中,vue和react是面試過程中基本必問的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽數(shù)據(jù)的變化,但它們在實現(xiàn)原理、使用場景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議2023-10-10詳解Webstorm 新建.vue文件支持高亮vue語法和es6語法
這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語法和es6語法,非常具有實用價值,需要的朋友可以參考下2017-10-10