vue1.0中，組件之間的通信主要通過vm.$dispatch沿著父鏈向上傳播和用vm.$broadcast向下廣播來實(shí)現(xiàn)。然而在vue2.0中，已經(jīng)廢除了這種用法。

vuex加入后，對組件之間的通信有了更加清晰的操作，對于中大型的項(xiàng)目來說，一開始就把vuex的使用計(jì)劃在內(nèi)是明智的選擇。

然而在一些小型的項(xiàng)目，或者說像我這樣寫到一半才發(fā)現(xiàn)vue2.0用不了$.broadcast和$dispatch的人來說，就需要一個(gè)比較便捷的解決方法。那么，eventBus的作用就體現(xiàn)出來了。

主要是現(xiàn)實(shí)途徑是在要相互通信的兄弟組件之中，都引入一個(gè)新的vue實(shí)例，然后通過分別調(diào)用這個(gè)實(shí)例的事件觸發(fā)和監(jiān)聽來實(shí)現(xiàn)通信和參數(shù)傳遞。

這里來看一個(gè)簡單的例子：

比如，我們這里有三個(gè)組件，main.vue、click.vue、show.vue。click和show是父組件main下的兄弟組件，而且click是通過v-for在父組件中遍歷在了多個(gè)列表項(xiàng)中。這里要實(shí)現(xiàn)，click組件中觸發(fā)點(diǎn)擊事件后，由show組件將點(diǎn)擊的是哪個(gè)dom元素console出來。

首先，我們給click組件添加點(diǎn)擊事件

<div class="click" @click.stop.prevent="doClick($event)"></div> 

 想要在doClick()方法中，實(shí)現(xiàn)對show組件的通信，我們需要新建一個(gè)js文件，來創(chuàng)建出我們的eventBus，我們把它命名為bus.js

import Vue from 'vue'; 
export default new Vue(); 

這樣我們就創(chuàng)建了一個(gè)新的vue實(shí)例。接下來我們在click組件和show組件中import它。

import Bus from 'common/js/bus.js'; 

接下來，我們在doClick方法中，來觸發(fā)一個(gè)事件：

methods: { 
  addCart(event) { 
  Bus.$emit('getTarget', event.target);  
  } 
} 

這里我們在click組件中每次點(diǎn)擊，都會在bus中觸發(fā)這個(gè)名為'getTarget'的事件，并將點(diǎn)擊事件的event.target順著事件傳遞出去。

接著，我們要在show組件中的created()鉤子中調(diào)用bus監(jiān)聽這個(gè)事件，并接收參數(shù)：

created() { 
    Bus.$on('getTarget', target => { 
      console.log(target); 
    }); 
   } 

這樣，在每次click組件的點(diǎn)擊事件中，就會把event.target傳遞到show中，并console出來。

所以eventBus的使用還是非常便捷的，但是如果是中大型項(xiàng)目，通信比較復(fù)雜，還是建議大家直接使用vuex。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論