vue2.0s中eventBus實現(xiàn)兄弟組件通信的示例代碼
vue1.0中，組件之間的通信主要通過vm.$dispatch沿著父鏈向上傳播和用vm.$broadcast向下廣播來實現(xiàn)。然而在vue2.0中，已經(jīng)廢除了這種用法。
vuex加入后，對組件之間的通信有了更加清晰的操作，對于中大型的項目來說，一開始就把vuex的使用計劃在內(nèi)是明智的選擇。
然而在一些小型的項目，或者說像我這樣寫到一半才發(fā)現(xiàn)vue2.0用不了$.broadcast和$dispatch的人來說，就需要一個比較便捷的解決方法。那么，eventBus的作用就體現(xiàn)出來了。
主要是現(xiàn)實途徑是在要相互通信的兄弟組件之中，都引入一個新的vue實例，然后通過分別調(diào)用這個實例的事件觸發(fā)和監(jiān)聽來實現(xiàn)通信和參數(shù)傳遞。
這里來看一個簡單的例子：
比如，我們這里有三個組件，main.vue、click.vue、show.vue。click和show是父組件main下的兄弟組件，而且click是通過v-for在父組件中遍歷在了多個列表項中。這里要實現(xiàn)，click組件中觸發(fā)點擊事件后，由show組件將點擊的是哪個dom元素console出來。
首先，我們給click組件添加點擊事件
<div class="click" @click.stop.prevent="doClick($event)"></div>
想要在doClick()方法中，實現(xiàn)對show組件的通信，我們需要新建一個js文件，來創(chuàng)建出我們的eventBus，我們把它命名為bus.js
import Vue from 'vue'; export default new Vue();
這樣我們就創(chuàng)建了一個新的vue實例。接下來我們在click組件和show組件中import它。
import Bus from 'common/js/bus.js';
接下來，我們在doClick方法中，來觸發(fā)一個事件：
methods: {
addCart(event) {
Bus.$emit('getTarget', event.target);
}
}
這里我們在click組件中每次點擊，都會在bus中觸發(fā)這個名為'getTarget'的事件，并將點擊事件的event.target順著事件傳遞出去。
接著，我們要在show組件中的created()鉤子中調(diào)用bus監(jiān)聽這個事件，并接收參數(shù)：
created() {
Bus.$on('getTarget', target => {
console.log(target);
});
}
這樣，在每次click組件的點擊事件中，就會把event.target傳遞到show中，并console出來。
所以eventBus的使用還是非常便捷的，但是如果是中大型項目，通信比較復(fù)雜，還是建議大家直接使用vuex。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue用Object.defineProperty手寫一個簡單的雙向綁定的示例
這篇文章主要介紹了用Object.defineProperty手寫一個簡單的雙向綁定的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue.js引用背景圖background無效的3種解決方案
這篇文章主要介紹了vue.js引用背景圖background無效的3種解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue.js頁面加載執(zhí)行created,mounted的先后順序說明
這篇文章主要介紹了vue.js頁面加載執(zhí)行created,mounted的先后順序說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中分割線的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue.js?中組件間通信的方法有很多種,這篇文章主要為大家詳細介紹了6種常見的直接或間接的組件傳值方式,有需要的小伙伴可以參考一下2024-01-01
由于 Vue 會在初始化實例時進行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對象上存在時才能進行上述過程 ，這樣才能讓它是響應(yīng)的，這篇文章主要介紹了Vue中$set()的使用方法場景分析,需要的朋友可以參考下2023-02-02
Vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細整理)
這篇文章給大家詳細的整理了Vue中實現(xiàn)路由跳轉(zhuǎn)的三種方式,使用vue-router,聲明式-router-link,編程式這三種方法,分別有詳細的代碼示例,需要的朋友可以參考下2023-09-09
本文主要介紹了Element如何實現(xiàn)loading的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式
這篇文章主要介紹了vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
當(dāng)我們未設(shè)置keepAlive的最大緩存數(shù)時,當(dāng)緩存組件太多,會導(dǎo)致內(nèi)存溢出,本文給大家介紹了vue3手動刪除keepAlive緩存的方法,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-03-03