お腹すいた?

自分のコードがボトルネックになっていることに気づいたとき、優秀なフレームワークのソースコードを読むと、いくつかの啓発を受けます.buttonコンポーネントはelement-uiで最も簡単なコンポーネントです.それから始めましょう.

inject: {
  elForm: {
    default: ''
  },
  elFormItem: {
    default: ''
  }
}

プロジェクトとは

Provideとinjectは主に高次プラグイン/コンポーネントライブラリの使用例を提供します.アプリケーションコードに直接使用することは推奨されません.2.2.0バージョンで追加されました.このオプションは、コンポーネント階層がどれだけ深く、上下関係が成立した時間内に常に有効になるかにかかわらず、祖先コンポーネントがすべての子孫子孫に依存を注入できるように、一緒に使用する必要があります.
上記の概念から分かるように、injectは親コンポーネント(または祖父コンポーネント)がサブコンポーネントに変数を注入し、サブコンポーネントはこの変数にアクセスして親コンポーネント内の属性または方法を使用することができる.では、親コンポーネント内でどのように使用するかは、上記のel-buttonで例を挙げると、el-formコンポーネント内には次のコードがあり、変数elFormによってコンポーネントのインスタンスthisをサブコンポーネントel-buttonに注入する.

 provide () {
    return {
      elForm: this
    }
  },

vueコンポーネントの依存注入inject provide学費は?
ソースコードを読み続け、計算プロパティcomputedでこのコードを発見します.

 buttonDisabled() {
    return this.disabled || (this.elForm || {}).disabled;
 }

this.disabledはpropsパラメータですElFormは、親コンポーネント(または祖父コンポーネント)のインスタンスです.el-buttonがel-formと組み合わせて使用する場合、el-buttonコンポーネント内ではthisにアクセスできません.elForm.上のコードの騒ぎを見てみましょう.一言ではっきり説明した.私ならそう書くかもしれません.

buttonDisabled() {
    let flag = false;
    if(!this.disabled){
        if(this.elForm && this.elForm.disabled){
            flag = true;
        }else{
            flag = false;
        }
    }else{
        flag = true;
    }
    return flag;
}

冗談を言って、私がこのように書くとは思わないでしょう.でもそう書くかもしれません

buttonDisabled() {
    let flag = false;
    if(!this.disabled){
        flag = this.elForm && this.elForm.disabled;
    }else{
        flag = true;
    }
    return flag;
}

いやいや、そう書くはずだ

buttonDisabled() {
    return this.disabled || this.elForm && this.elForm.disabled;
}

やはりお腹が空いたのかソースコードが迫っている.