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();

person.say(); がポップアップします。この利点は、追加のメモリが生成されず、インスタンス化されたすべてのオブジェクトがプロトタイプからこのメソッドを継承することです。

Vue は実際には js クラス ライブラリです。もちろん、プロトタイプという魔法の機能を使用してカスタム属性を拡張することもできます。

Vue.app を初期化する前に次の文を追加します。

Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()

この方法で、コンポーネント内で $eventHub を直接呼び出すことができます

以下は、上記のメソッドを変形したものです:

Publisher

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$eventHub.$emit('你的事件名字', 你的需要传送的数据)

Receiver

りー

4. ブロードキャストをオフにする

ブロードキャストをオフにするには、主に $off (イベント名) を使用してリスニングをキャンセルします!

上記は私が皆さんのためにまとめたものです。将来的にはすべての人に役立ちます。

関連記事: レンダリング時に

vue {{}} がちらつく問題とその解決策

js が ModelAndView 値を取得する問題についての簡単な説明

Vue ページ読み込み時のちらつきの問題

以上がVue2.0 イベントのブロードキャストと受信 (オブザーバー モード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。