首頁 > 文章 > web前端 > eventBus兄弟組件通信詳解

eventBus兄弟組件通信詳解

這次帶給大家eventBus兄弟組件通信詳解，eventBus兄弟組件通信的注意事項有哪些，下面就是實戰案例，一起來看一下。

vue1.0中，元件之間的通訊主要透過vm.$dispatch沿著父鏈向上傳播和用vm.$broadcast向下廣播來實現。然而在vue2.0中，已經廢除了這種用法。

vuex加入後，對組件間的通訊有了更清晰的操作，對於中大型的專案來說，一開始就把vuex的使用計畫在內是明智的選擇。

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

主要是現實途徑是在要相互通訊的兄弟元件之中，都引入一個新的vue實例，然後透過分別呼叫這個實例的事件觸發和監聽來實現通訊和參數傳遞。

這裡來看一個簡單的例子：

例如，我們這裡有三個元件，main.vue、click.vue、show.vue。 click和show是父元件main下的兄弟元件，而click是透過v-for在父元件中遍歷在了多個清單項目中。這裡要實現，click元件中觸發點擊事件後，由show元件將點擊的是哪個dom元素console出來。

首先，我們為click元件新增點擊事件

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

想要在doClick()方法中，實作對show元件的通信，我們需要新建一個js文件，來創建出我們的eventBus，我們把它命名為bus.js

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

這樣我們就建立了一個新的vue實例。接下來我們在click元件和show元件中import它。

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

接下來，我們在doClick方法中，來觸發一個事件：

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

這裡我們在click元件中每次點擊，都會在bus中觸發這個名為'getTarget'的事件，並將點擊事件的event.target順著事件傳遞出去。

接著，我們要在show元件中的created()鉤子中呼叫bus監聽這個事件，並接收參數：

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

這樣，在每次click元件的點擊事件中，就會把event.target傳遞到show中，並console出來。

所以eventBus的使用還是非常方便的，但是如果是中大型項目，通信比較複雜，還是建議大家直接使用vuex。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！