vue-bus: 一個 Vue.js 事件中心插件

vue-bus

一個 Vue.js 事件中心插件，同時支持 Vue 1.0 和 2.0

緣由

Vue 2.0 從新梳理了事件系統，由於基於組件樹結構的事件流方式實在是讓人難以理解，而且在組件結構擴展的過程當中會變得愈來愈脆弱。雖然依然保留了父子組件間的事件流，但有諸多限制，好比不支持跨多層父子組件通訊，也沒有解決兄弟組件間的通訊問題。

Vue 推薦使用一個全局事件中心來分發和管理應用內的全部事件，詳見文檔。這是一個最佳實踐，同時適用於 Vue 1.0 和 2.0。你固然能夠聲明一個全局變量來使用事件中心，但你若是在使用 webpack 之類的模塊系統，這顯然不合適。每次使用都手動 import 進來也很不方便，因此就有了這個插件：vue-bus

vue-bus 提供了一個全局事件中心，並將其注入每個組件，你能夠像使用內置事件流同樣方便的使用全局事件。

安裝

$ npm install vue-bus

若是在一個模塊化工程中使用它，必需要經過 Vue.use() 明確地安裝 vue-bus：

import Vue from 'vue';
import VueBus from 'vue-bus';

Vue.use(VueBus);

若是使用全局的 script 標籤，則無須如此（手動安裝）。

使用

監聽事件和清除監聽

// ...
created() {
  this.$bus.on('add-todo', this.addTodo);
  this.$bus.once('once', () => console.log('這個監聽器只會觸發一次'));
},
beforeDestroy() {
  this.$bus.off('add-todo', this.addTodo);
},
methods: {
  addTodo(newTodo) {
    this.todos.push(newTodo);
  }
}

觸發事件

// ...
methods: {
  addTodo() {
    this.$bus.emit('add-todo', { text: this.newTodoText });
    this.$bus.emit('once');
    this.newTodoText = '';
  }
}

注意：$bus.on $bus.once $bus.off $bus.emit 只是 $bus.$on $bus.$once $bus.$off $bus.$emit 的別名。 詳見 API。

項目地址

GitHub，喜歡的話給個 Star 吧 :P