vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊

更新時(shí)間：2018年03月02日 10:31:03 作者：阿豪boy

這篇文章主要介紹了vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊,需要的朋友可以參考下

新創(chuàng)建一個(gè)vue實(shí)例用于調(diào)度事件的綁定和發(fā)送

可以做到同級(jí)組件相互通訊，傳遞參數(shù)，點(diǎn)擊第一個(gè)組件會(huì)修改第二個(gè)組件的label值，點(diǎn)擊第二個(gè)組件會(huì)修改第二個(gè)組件的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>
 // 使用一個(gè)vue實(shí)例 作為事件的載體,用于綁定事件和處理發(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) => {
     // 這個(gè)this 指的是one的vue實(shí)例
     this.val = val
    }
   )
  },
  methods: {
   click() {
    // 如果one被點(diǎn)擊了，則發(fā)送一個(gè)one_click的事件，并傳遞一個(gè)參數(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實(shí)現(xiàn)同級(jí)組件的通訊，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

前端vue如何使用高德地圖
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調(diào)用其他key，完成需求，感興趣的朋友可以了解下
2020-11-11
vue如何實(shí)現(xiàn)自定義底部菜單欄
這篇文章主要介紹了vue如何實(shí)現(xiàn)自定義底部菜單欄,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
Vuex處理用戶Token過期及優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊
這篇文章主要為大家介紹了Vuex處理用戶Token優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊及Token?過期問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
解決vuejs項(xiàng)目里css引用背景圖片不能顯示的問題
今天小編就為大家分享一篇解決vuejs項(xiàng)目里css引用背景圖片不能顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue中跨域及打包部署到nginx跨域設(shè)置方法
這篇文章主要介紹了Vue中跨域以及打包部署到nginx跨域設(shè)置方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
vue2.0 常用的 UI 庫實(shí)例講解
這篇文章主要介紹了vue2.0 常用的 UI 庫實(shí)例講解，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-12-12
Vue el-autocomplete遠(yuǎn)程搜索下拉框并實(shí)現(xiàn)自動(dòng)填充功能(推薦)
在elementui Input輸入框中可以找到遠(yuǎn)程搜索組件，獲取服務(wù)端的數(shù)據(jù)。這篇文章主要給大家介紹Vue el-autocomplete遠(yuǎn)程搜索下拉框并實(shí)現(xiàn)自動(dòng)填充功能，感興趣的朋友一起看看吧
2019-10-10
在Vue3中進(jìn)行單元測(cè)試和集成測(cè)試的操作方法
隨著越來越多的企業(yè)和開發(fā)者選擇使用 Vue.js 構(gòu)建他們的前端應(yīng)用程序,確保代碼質(zhì)量和可靠性變得尤為重要,在本博客中,我們將深入探討如何在 Vue 3 中進(jìn)行單元測(cè)試和集成測(cè)試,并提供示例代碼來幫助您上手,需要的朋友可以參考下
2025-01-01
手把手帶你使用vue+node作后端連接數(shù)據(jù)庫
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫進(jìn)行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下
2023-03-03
Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-07-07