vue 使用eventBus實現(xiàn)同級組件的通訊
更新時間：2018年03月02日 10:31:03 作者：阿豪boy
這篇文章主要介紹了vue 使用eventBus實現(xiàn)同級組件的通訊,需要的朋友可以參考下
新創(chuàng)建一個vue實例用于調(diào)度事件的綁定和發(fā)送
可以做到同級組件相互通訊，傳遞參數(shù)，點擊第一個組件會修改第二個組件的label值，點擊第二個組件會修改第二個組件的label值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<one></one>
<two></two>
</div>
</body>
<script>
// 使用一個vue實例 作為事件的載體,用于綁定事件和處理發(fā)送事件，作為調(diào)度中心
let eventBus = new Vue()
let one = {
template: '<div>{{val}} <button @click="click">click</button></div>',
data() {
return {
val: 0
}
},
created() {
//為one綁定事件，如果two_click事件發(fā)生了，則執(zhí)行回調(diào)函數(shù)
eventBus.$on('two_click',
(val) => {
// 這個this 指的是one的vue實例
this.val = val
}
)
},
methods: {
click() {
// 如果one被點擊了，則發(fā)送一個one_click的事件，并傳遞一個參數(shù)
eventBus.$emit('one_click', 11)
}
}
}
let two = {
template: '<div>{{val}} <button @click="click">click</button></div>',
data() {
return {
val: 0
}
},
created() {
eventBus.$on('one_click',
(val) => {
this.val = val
})
},
methods: {
click() {
eventBus.$emit('two_click', 22)
}
}
}
new Vue({
el: '#app',
components: {
one,
two
}
})
</script>
</html>
總結(jié)
以上所述是小編給大家介紹的vue 使用eventBus實現(xiàn)同級組件的通訊，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調(diào)用其他key，完成需求，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vue如何實現(xiàn)自定義底部菜單欄,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下2019-07-07
Vuex處理用戶Token過期及優(yōu)化設(shè)置封裝本地存儲操作模塊
這篇文章主要為大家介紹了Vuex處理用戶Token優(yōu)化設(shè)置封裝本地存儲操作模塊及Token?過期問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
今天小編就為大家分享一篇解決vuejs項目里css引用背景圖片不能顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue中跨域以及打包部署到nginx跨域設(shè)置方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue2.0 常用的 UI 庫實例講解，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能(推薦)
在elementui Input輸入框中可以找到遠程搜索組件，獲取服務(wù)端的數(shù)據(jù)。這篇文章主要給大家介紹Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能，感興趣的朋友一起看看吧2019-10-10
隨著越來越多的企業(yè)和開發(fā)者選擇使用 Vue.js 構(gòu)建他們的前端應(yīng)用程序,確保代碼質(zhì)量和可靠性變得尤為重要,在本博客中,我們將深入探討如何在 Vue 3 中進行單元測試和集成測試,并提供示例代碼來幫助您上手,需要的朋友可以參考下2025-01-01
手把手帶你使用vue+node作后端連接數(shù)據(jù)庫
為了快速學(xué)習nodejs制作后端并和數(shù)據(jù)庫進行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下2023-03-03
Elementui按鈕設(shè)置默認選中狀態(tài)的實現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認選中狀態(tài)的實現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細,對大家學(xué)習或者使用Elementui具有一定的參考學(xué)習價值,需要的朋友可以參考下2023-07-07