vue手動でon、emit、offのコードをカプセル化して詳しく説明します。

一、概念
1.$on(「イベント名」、コールバック関数)
イベントバインディング、一つのイベント名の上に複数の関数を結びつけることができます。
2.$emit(「イベント名」は、転送が必要な値)
イベントトリガー時には、現在のイベントのすべての関数がトリガーされます。
3.$off（「イベント名」、「紐付けを解く関数が必要」）
イベントを解除する場合、指定された解除関数は該当関数だけを解除します。そうでなければ、すべてを解除します。
二、手動でonをカプセル化し、emit、offイベントがvueにおける役割
𞓜  vueで非親子コンポーネントの値を送信する場合、vueのプロトタイプに共通のvueの例を追加することにより、コンポーネント間でこの共通のインスタンスの$on/emitを呼び出してデータを転送し、転送する側は$emitを呼び出し、受信側は$onを呼び出すことができます。Vue.prototype.Observer = new Vue();  // 𞓜  この方式はすべての対象に共通のonとemitを持たせることができますが、増加した属性がマウントされた例の対象が大きすぎて、あなたの一台のフェラーリの車輪が壊れました。また新しいフェラーリを買って、その車輪を外して、元のフェラーリに置いて、これは非常に性能がかかります。したがって、イベントを手動でカプセル化して、親子以外の値を実現することができます。

import Observer from "./Observer"; //        
Vue.prototype.Observer = Observer;  //     vue    

三、パッケージオン、emit、offイベント
1.$on：イベント倉庫保管イベントを作成し、イベント名が存在するかどうかを判断する。存在しない場合は、行列を初期化します。存在する場合は、現在の関数を行列にプッシュします。

const EventList = {}; //                ，         ，      ，        
const on = function(eventName,callback){
  if(!EventList[eventName]){
    EventList[eventName] = [];
  }

  EventList[eventName].push(callback);
}

2.$emit：イベント名が存在するかどうかを判断します。もし存在しないならば、直接returnに戻ります。存在する場合、現在のイベント名に対応するすべての関数を巡回し、パラメータを転送します。

const emit = function(eventName,params){
  if(!EventList[eventName])return;

  EventList[eventName].map((cb)=>{
    cb(params)
  })
}

3.off：イベント名が存在するかどうかを判断する。もし存在しないならば、直接returnに戻ります。存在する場合、calbackが存在するかどうかを判断し、存在する場合は、下付きの関数を削除し、存在しない場合は現在の配列をクリアします。

const off = function(eventName,callback){
  if(!EventList[eventName])return;

  if(callback){
    let index = EventList[eventName].indexOf(callback);
    EventList[eventName].splice(index,1);
  }else{
    EventList[eventName] = [];
  }
}

4.エクスポート：他のファイルでの呼び出しに便利です。

export default {
  $on : on,
  $emit : emit,
  $off : off
}

締め括りをつける
以上述べたのは小编が绍介したvueマニュアルでon、emit、offのコードを通して详しく解说しました。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。