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を参照.