ホームページ > 記事 > ウェブフロントエンド > Vue2.0 イベントのブロードキャストと受信 (オブザーバー モード)
この記事では主に Vue2.0 イベント (オブザーバー モード) のブロードキャストと受信について紹介します。参考として共有します。
1.Vue1.0イベントブロードキャストと受信(オブザーバーモード)
これは初期のvue1.0コンポーネント間でデータを通信する方法であり、vue公式Webサイトには $dispatch と $broadcast という2つのメソッドが記載されています。
しかし、これらの 2 つのメソッドは vue2.0 以降廃止される予定です
公式ドキュメント
2. Vue2.0 イベントのブロードキャストと受信 (オブザーバー モード)
vue2.0 では、$emit、$on、$off を使用して、リスニング イベントをそれぞれ配信、監視、キャンセルできます。公式が提供する最も簡単なアップグレード提案は、集中型イベント プロセッサを使用することです。また、Vue インスタンスはイベント配布インターフェイスを実装しているため、これを実行できることも明確に述べています
コードを直接見てください。初期化中に、eventhub という名前の空の vue オブジェクトをグローバル App.vue ファイルのデータに追加します。
new Vue({ el: '#app', router, render: h => h(App), data: { eventHub: new Vue() } })
このようにして、任意のコンポーネントでイベントの発行および受信メソッドを呼び出すことができます。コンポーネントは送受信しますか?フロントのコードを見てください:
特定のコンポーネント内で呼び出しイベントがトリガーされます
//通过this.$root.eventHub获取此对象 //调用$emit 方法 this.$root.eventHub.$emit('你的事件名字', 你的需要传送的数据)
上記は、イベントを発行するコンポーネントであり、他の場合はブロードキャストを送信したと理解できます。コンポーネントにはブロードキャストが必要です。その後、私のチャンネルに調整してください。このチャンネルはイベント名であり、ブロードキャストの内容は送信されたデータです。問題は、他のコンポーネントがそれをどのように受信するかということです。コードを参照してください
this.$root.eventHub.$on('你的事件名字', (传送的数据)=>{ handle(yourData) } )
ブロードキャストをリッスンする必要があるコンポーネントは、グローバルに定義されたeventHub.$onを通じてブロードキャストを受信できます。受信チャネルはブロードキャスト イベントの名前と番号です。コールバックはブロードキャスト コンテンツです。
3. もっと簡潔に記述してください
js をある程度理解している場合は、js には主に js オブジェクトに追加の属性を追加するプロトタイプがあることをご存知かもしれません。
例えば、オブジェクトを宣言します
var person=function(){ this.name="小明"; }
その後、音声メソッドを追加するなどオブジェクトを拡張すると、プロトタイプという便利な機能が役に立ちます
person.prototype.say=function(){ alert(this.name); }
これは元の関数オブジェクトを拡張したものです
直接呼び出すと
var a=new person();
Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()
この方法で、コンポーネント内で $eventHub を直接呼び出すことができます
以下は、上記のメソッドを変形したものです:
Publisher
//通过this.$root.eventHub获取此对象 //调用$emit 方法 this.$eventHub.$emit('你的事件名字', 你的需要传送的数据)
Receiver
4. ブロードキャストをオフにする
上記は私が皆さんのためにまとめたものです。将来的にはすべての人に役立ちます。
js が ModelAndView 値を取得する問題についての簡単な説明
以上がVue2.0 イベントのブロードキャストと受信 (オブザーバー モード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。