vue中的非父子間的通訊問題簡單的實例代碼
更新時間：2017年07月19日 11:37:21 作者：有一個王小森
這篇文章主要介紹了vue中的非父子間的通訊問題簡單的實例代碼,需要的朋友可以參考下
官網(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)站的支持！
相關文章
這篇文章主要介紹了vue 實現(xiàn)倒計時秒殺的組件，緊接著通過實例代碼給大家介紹小程序或者vue商品秒殺倒計時功能,需要的朋友可以參考下2019-04-04
vue頁面中使用getElementsByClassName無法獲取元素的解決
這篇文章主要介紹了vue頁面中使用getElementsByClassName無法獲取元素的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3動態(tài)組件怎么進行異常處理？下面本篇文章帶大家聊聊Vue3 動態(tài)組件異常處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
這篇文章主要介紹了解決vue-loader加載不上的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
打包組件報錯:Error:Cannot?find?module?'vue/compiler-sfc&ap
最近遇到這樣的問題,vue組件庫搭建過程中使用webpack打包組件時報錯,本文給大家分享打包組件報錯:Error:?Cannot?find?module?‘vue/compiler-sfc‘的解決方法,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue如何自定義地址設置@，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue3中使用Pinia修改State的五種方式,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法
這篇文章主要介紹了vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了Vue中的父子組件傳值.sync,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
詳解Vue+elementUI build打包部署后字體圖標丟失問題
這篇文章主要介紹了詳解Vue+elementUI build打包部署后字體圖標丟失問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07