Vue中的eventBus怎么使用

本篇內容主要講解“Vue中的eventBus怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue中的eventBus怎么使用”吧!

1. 簡介

Vue 組件中常見的有：父子組件通信、兄弟組件通信。而父子組件通信就很簡單，父組件會通過 props 向下傳數據給子組件，當子組件有事情要告訴父組件時會通過 $emit 事件告訴父組件。

今天就來說說，如果兩個頁面沒有任何引入和被引入關系，該如何通信呢？

如果應用程序不需要類似 Vuex 這樣的庫來處理組件之間的數據通信，就可以考慮 Vue 中的事件總線 ，即 eventBus 來通信。

eventBus 又稱為事件總線。在 Vue 中可使用 eventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可向該中心注冊發送事件或接收事件，所以組件都可以上下平行地通知其他組件。但也就是太方便所以若使用不慎，就會造成難以維護的“災難”，因此才需要更完善的 Vuex 作為狀態管理中心，將通知的概念上升到共享狀態層次。

2. 使用

可以聲明一個全局變量來使用事件中心，但如果在使用 webpack 之類的模塊系統，這顯然不合適。
每次使用都手動 import 進來也很不方便，所以本文使用 vue-bus 插件。

vue-bus npm地址

vue-bus github地址

安裝及引入

npm install vue-bus --save

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝 vue-bus：

// main.js
import Vue from 'vue';
import VueBus from 'vue-bus';
Vue.use(VueBus);

在組件中使用

假設有兩個Vue組件需要通信 ，在 A 組件的按鈕上面綁定了點擊事件發送一則消息，想通知 B 組件。

// A 組件
<template>
  <div class="wrap">
    <button @click="sendMsg">觸發</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      Amsg:'我是來自A組件的信息',
    }
  },
  methods:{
    sendMsg(){
      this.$bus.emit('changeMsg', this.Amsg );
      this.$bus.emit('doOnce','我只會觸發一次');
    }
  },
}
</script>

// B 組件
<template>
  <div>
    <h4>{{Bmsg}}</h4>
  </div>
</template>

<script>
export default {
  data(){
    return {
      Bmsg:'我是B組件',
    }
  },
  methods:{
    getMsg(msg){
      this.Bmsg = msg;
      console.log(msg);
    }
  },
  created(){
    /*
    * 接收事件
    * 這種寫法也體現了：A 組件調用 B 組件中的方法。如果只是傳遞數據，可參考如下簡化寫法：
    * this.$bus.on('changeMsg', (msg) => { this.Bmsg = msg });
	*/ 
    this.$bus.on('changeMsg', this.getMsg);
    // 此偵聽器只會觸發一次
    this.$bus.once('doOnce', (txt) => { console.log(txt) });
  },
  // 組件銷毀時，移除EventBus事件監聽
  beforeDestroy() {
    this.$bus.off('changeMsg', this.addTodo);
  },
}
</script>

當我們點擊5次觸發按鈕時，效果如下：

補充：移除監聽事件

為了避免在監聽時，事件被反復觸發，通常需要在頁面銷毀時移除事件監聽。或者在開發過程中，由于熱更新，事件可能會被多次綁定監聽，這時也需要移除事件監聽。

//使用方式一定義時
this.$EventBus.$off('eventName');
//使用方式二定義時
EventBus.$off('eventName');

到此，相信大家對“Vue中的eventBus怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！