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í)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論