vue2.0s中eventBus實作兄弟組件通訊詳解

本文主要介紹vue2.0s中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。

相關推薦：

Vue 兄弟元件通訊的方法

Vue.js元件通訊實例分享

vue中的event bus非父子元件通訊詳解

#Vue.js元件通訊中的幾種姿勢具體分析

深入探討Vue.js元件與元件通訊

#

以上是vue2.0s中eventBus實作兄弟組件通訊詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！