vue中的非父子間的通訊問(wèn)題簡(jiǎn)單的實(shí)例代碼
更新時(shí)間：2017年07月19日 11:37:21 作者：有一個(gè)王小森
這篇文章主要介紹了vue中的非父子間的通訊問(wèn)題簡(jiǎn)單的實(shí)例代碼,需要的朋友可以參考下
官網(wǎng)上的例子好晦澀，看了一個(gè)頭兩個(gè)大，關(guān)于非父子間的通訊問(wèn)題，經(jīng)過(guò)查閱得到了下面的例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟之間的通訊問(wèn)題</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">點(diǎn)擊+</button>',
data:function () {
return{
oneNum:0
}
},
// 為組件one創(chuàng)建方法，用來(lái)觸發(fā)事件common（common是中央事件總線bus的自定義事件名稱，只需要與two中的監(jiān)聽(tīng)事件名稱一致即可。
methods:{
oneFn:function () {
bus.$emit("common", this.oneNum+=1)//此處的參數(shù)即為two中監(jiān)聽(tīng)事件中傳入的參數(shù)（n），此處（觸發(fā)）的this指的是組件one，而在（監(jiān)聽(tīng)）的this指的是bus。
}
}
});
// 組件 two
Vue.component('two',{
template:'<p>{{twoNum}}</p>',
data:function () {
return {
twoNum:0
}
},
// 為組件two創(chuàng)建鉤子，掛載$on監(jiān)聽(tīng)事件，
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>
我也是新手，剛開(kāi)始自學(xué)Vue，上面有不懂的童鞋請(qǐng)留言，一起進(jìn)步！
以上所述是小編給大家介紹的vue中的非父子間的通訊問(wèn)題簡(jiǎn)單的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
前端vue面試總問(wèn)watch和computed區(qū)別及建議總結(jié)
在現(xiàn)代前端的面試中,vue和react是面試過(guò)程中基本必問(wèn)的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽(tīng)數(shù)據(jù)的變化,但它們?cè)趯?shí)現(xiàn)原理、使用場(chǎng)景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過(guò)程中的建議2023-10-10
Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的
最近接觸了vue.js,一度非常好奇vue.js是如何監(jiān)測(cè)數(shù)據(jù)更新并且重新渲染頁(yè)面,這篇文章主要給大家介紹了關(guān)于Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue-router 路由傳參問(wèn)題(路由傳參方式)
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
詳解Webstorm 新建.vue文件支持高亮vue語(yǔ)法和es6語(yǔ)法
這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語(yǔ)法和es6語(yǔ)法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
本篇文章主要介紹了Vue 兄弟組件通信的方法（不使用Vuex），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了Vue中使用js-cookie詳情，文章圍繞js-cookie的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容具有一定的的參考價(jià)值，需要的小伙伴可以參考一下2022-03-03
在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程
這篇文章主要介紹了在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程,需要的朋友可以參考下2018-04-04
本篇文章主要介紹了詳解使用vuex進(jìn)行菜單管理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Vue3?通過(guò)作用域插槽實(shí)現(xiàn)樹(shù)形菜單嵌套組件
這篇文章主要為大家介紹了Vue3?通過(guò)作用域插槽實(shí)現(xiàn)樹(shù)形菜單嵌套組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了vite+vue3項(xiàng)目中使用SVG方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10