vue通信方式EventBusの実現コード詳細

vue通信方式はたくさんあります。プロジェクトで使うものが多いです。 pros、vuex、$emit/米ドルonの3つの種類があります。 provide/inject（高次コンポーネントに適合）、  $attrsおよび$listeners （上位のコンポーネントに適合）および $parent/$child/ref、eventBus などの3つの方法。多くの場合、私たちはアプリだけを使って、原理と実現を知っていますが、原理を知っていて、アプリだけを呼び出すことができる開発者と同じレベルではないと思います。だからここはコンポーネントをまたいで通信するようです。 eventBus通信の原理を示します。これも自分で学んだものです。ここにメモしてください。

class EventBus{
    constructor(){
      this.event=Object.create(null);
    };
    //    
    on(name,fn){
      if(!this.event[name]){
        //            
        this.event[name]=[];
      };
      this.event[name].push(fn);
    };
    //    
    emit(name,...args){
      //       
      this.event[name]&&this.event[name].forEach(fn => {
        fn(...args)
      });
    };
    //         
    once(name,fn){
      //               、       ，          。
      const cb=(...args)=>{
        //  
        fn.apply(this,args);
        //  
        this.off(name,fn);
      };
      //  
      this.on(name,cb);
    };
    //    
    off(name,offcb){
      if(this.event[name]){
        let index=this.event[name].findIndex((fn)=>{
          return offcb===fn;
        })
        this.event[name].splice(index,1);
        if(!this.event[name].length){
          delete this.event[name];
        }
      }
    }
  }

以上のコードは購読モードをリリースするのに使います。
締め括りをつける
以上述べたのは小编が皆さんに绍介したvue通信方式EventBusの実现コードです。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。