ホームページ >ウェブフロントエンド >jsチュートリアル >vue のバス グローバル イベント センター (詳細なチュートリアル)

vue のバス グローバル イベント センター (詳細なチュートリアル)

亚连
亚连オリジナル
2018-06-04 14:36:353760ブラウズ

ue-bus はグローバル イベント センターを提供し、それを各コンポーネントに挿入します。組み込みのイベント ストリームを使用するのと同じくらい便利にグローバル イベントを使用できます。この記事では、vue Bus Global Event Center の簡単なデモを紹介しますので、必要な方は参考にしてください

1. vue-cli でプロジェクトをビルドした後、npm を使用して vue-bus をインストールします

 npm install vue-bus

2。 .js の main グローバル登録:

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

4. データの受信:

this.$bus.emit("eventName",data)

5.の範囲これは、現在の VM インスタンスを指す必要があります。通常、on listen イベントは、コンポーネントのライフサイクル関数に作成またはマウントされます。バスの登録解除は beforeDestroy に行う必要があります。

バス イベントが複数回トリガーされる問題については、一方で、vue コンポーネントが再利用されているため、バス イベントが繰り返し登録され、「同じイベント名」バスと送受信の間の一意の関係が破壊されている可能性があります。ページがルーティングされても、元のページのバス イベントはキャンセルされず、プログラム内で非表示のままです。

上記は私があなたのためにまとめたものです。

関連記事:

vue.js_vue.jsの$setメソッドと配列更新メソッド

selectコンポーネントのJQuery selected valueメソッド

vueとvue-i18nを組み合わせてバックグラウンドデータを実装言語切り替え方法



以上がvue のバス グローバル イベント センター (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。