vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼
vue1.0中，組件之間的通信主要通過(guò)vm.$dispatch沿著父鏈向上傳播和用vm.$broadcast向下廣播來(lái)實(shí)現(xiàn)。然而在vue2.0中，已經(jīng)廢除了這種用法。
vuex加入后，對(duì)組件之間的通信有了更加清晰的操作，對(duì)于中大型的項(xiàng)目來(lái)說(shuō)，一開(kāi)始就把vuex的使用計(jì)劃在內(nèi)是明智的選擇。
然而在一些小型的項(xiàng)目，或者說(shuō)像我這樣寫(xiě)到一半才發(fā)現(xiàn)vue2.0用不了$.broadcast和$dispatch的人來(lái)說(shuō)，就需要一個(gè)比較便捷的解決方法。那么，eventBus的作用就體現(xiàn)出來(lái)了。
主要是現(xiàn)實(shí)途徑是在要相互通信的兄弟組件之中，都引入一個(gè)新的vue實(shí)例，然后通過(guò)分別調(diào)用這個(gè)實(shí)例的事件觸發(fā)和監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)通信和參數(shù)傳遞。
這里來(lái)看一個(gè)簡(jiǎn)單的例子：
比如，我們這里有三個(gè)組件，main.vue、click.vue、show.vue。click和show是父組件main下的兄弟組件，而且click是通過(guò)v-for在父組件中遍歷在了多個(gè)列表項(xiàng)中。這里要實(shí)現(xiàn)，click組件中觸發(fā)點(diǎn)擊事件后，由show組件將點(diǎn)擊的是哪個(gè)dom元素console出來(lái)。
首先，我們給click組件添加點(diǎn)擊事件
<div class="click" @click.stop.prevent="doClick($event)"></div>
想要在doClick()方法中，實(shí)現(xiàn)對(duì)show組件的通信，我們需要新建一個(gè)js文件，來(lái)創(chuàng)建出我們的eventBus，我們把它命名為bus.js
import Vue from 'vue'; export default new Vue();
這樣我們就創(chuàng)建了一個(gè)新的vue實(shí)例。接下來(lái)我們?cè)赾lick組件和show組件中import它。
import Bus from 'common/js/bus.js';
接下來(lái)，我們?cè)赿oClick方法中，來(lái)觸發(fā)一個(gè)事件：
methods: {
addCart(event) {
Bus.$emit('getTarget', event.target);
}
}
這里我們?cè)赾lick組件中每次點(diǎn)擊，都會(huì)在bus中觸發(fā)這個(gè)名為'getTarget'的事件，并將點(diǎn)擊事件的event.target順著事件傳遞出去。
接著，我們要在show組件中的created()鉤子中調(diào)用bus監(jiān)聽(tīng)這個(gè)事件，并接收參數(shù)：
created() {
Bus.$on('getTarget', target => {
console.log(target);
});
}
這樣，在每次click組件的點(diǎn)擊事件中，就會(huì)把event.target傳遞到show中，并console出來(lái)。
所以eventBus的使用還是非常便捷的，但是如果是中大型項(xiàng)目，通信比較復(fù)雜，還是建議大家直接使用vuex。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vuex是一個(gè)專門(mén)為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex的簡(jiǎn)單使用,需要的朋友可以參考下2018-02-02
用Vue實(shí)現(xiàn)頁(yè)面訪問(wèn)攔截的方法詳解
大家在做前端項(xiàng)目的時(shí)候,大部分頁(yè)面, 游客都可以直接訪問(wèn) , 如遇到 需要登錄才能進(jìn)行的操作,頁(yè)面將提示并跳轉(zhuǎn)到登錄界面,那么如何才能實(shí)現(xiàn)頁(yè)面攔截并跳轉(zhuǎn)到對(duì)應(yīng)的登錄界面呢,本文小編就來(lái)給大家介紹一下Vue實(shí)現(xiàn)頁(yè)面訪問(wèn)攔截的方法,需要的朋友可以參考下2023-08-08
vue3 element-plus el-tree自定義圖標(biāo)方式
這篇文章主要介紹了vue3 element-plus el-tree自定義圖標(biāo)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2.0路由切換后頁(yè)面滾動(dòng)位置不變BUG的解決方法
下面小編就為大家分享一篇vue2.0路由切換后頁(yè)面滾動(dòng)位置不變BUG的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié))
這篇文章主要介紹了Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn)
這篇文章主要介紹了element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
vue配置請(qǐng)求本地json數(shù)據(jù)的方法
這篇文章主要介紹了vue配置請(qǐng)求本地json數(shù)據(jù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue Tooltip提示動(dòng)態(tài)換行問(wèn)題
這篇文章主要介紹了vue Tooltip提示動(dòng)態(tài)換行問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng))
這篇文章主要介紹了Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁(yè)面更快響應(yīng)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue打包上傳服務(wù)器刷新404問(wèn)題的兩種方案
這篇文章主要給大家介紹了關(guān)于vue打包上傳服務(wù)器刷新404問(wèn)題的兩種方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04