vue-カスタムコンポーネントの作成方法

ちょうどvueの1篇の笔记を学び始めて、暇になって无事にひっくり返して见て、ついでに整理して、ちょうどvueの学友を助けることができることを望みます.
まず、成熟したフォームコンポーネントの基本機能html構造を見てみましょう.

vueコード:vueのdataでデータモデルと検証ルールを定義する

  data() {
    return {
      model: { username: "", password: "" },
      rules: {
        username: [
          { required: true, message: "      " }
        ],
        password: [
          { required: true, message: "     " },
           {min: 6,max:12,message:'   6~12   '}
        ],
      }
    };
  },

これはelementUIのフォームコンポーネントで、くだらないこともあまり書かれていません.次に、この使用方法を真似て、私たち自身のフォームコンポーネントを実現します.上のhtml構造を観察すると、最外層のformと、内部のform-itemとinputに分けられる.formは、主にバインドデータモデルおよび検証ルールを受信するために使用される.form-itemは、検証のために使用され、エラー・プロンプトが表示されます.inputは、データモデルと双方向にバインドされた一般的なラベルです.
くだらないことはあまり書かないで、直接コードを置いてAppします.vueコード:

import MyInput from './components/Input.vue';
import MyFormItem from './components/FormItem.vue';
import MyForm from './components/Form.vue';
export default {
  name: "app",
  components: {
    MyInput,
    MyFormItem,
    MyForm
  },
  data() {
    return {
      //     
      model: { username: "", password: "" },
      //     
      rules: {
        username: [
           {required: true, message: "      " }
        ],
        password: [
           {required: true, message: "     " },
           {min: 6,max:12,message:'   6~12   '}
        ],
      }
    };
  }
};

カスタムコンポーネントの使用方法はelementUIを模倣しています.だから内部もこのように実現します.まず実現するのはカスタムinputです.
Input.vueファイルのコードは次のとおりです.

export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    }
  },
  methods: {
    onInput(e) {
      let value = e.target.value;
      this.$emit("input", value);
      this.$parent.$emit("validate");
    }
  }
};

カスタムinputコンポーネントの内部は通常のinputであり、このinputの双方向バインドを実現する必要があります.

propsのvalueは、親コンポーネントのv-model双方向バインドから渡される値です.

propsのtypeは、バインドされた入力ボックスのタイプ、text、passwordである.値をinputラベルにバインドします.

inputラベルの:valueがバインドされているのはpropsから渡されたvalue値です.すなわち,カスタムinputデータモデルが変更されると,input入力ボックスの値をタイムリーに更新することができる.

inputタグ上のinputのイベントは、inputタグの内容が変更されるとonInputメソッドを実行し、onInput関数はinputイベントをトリガーし、データモデルも変更され、双方向バインドが実現される.

onInputメソッドは、inputラベルの値が変更されたときにトリガーされ、変更された値を取得し、カスタムコンポーネントのinputイベントをトリガーし、新しい値をパラメータとして渡し、データモデルの更新を通知します.また、親コンポーネントのvalidateをトリガする方法で、前のレベルのコンポーネントform-itemに「値が変更されました.再検証してください」と通知します.
FormItem.vueファイルコードは次のとおりです.

import Schema from "async-validator";
export default {
  inject: ["myForm"],
  props: ["label", "prop"],
  data() {
    return {
      errMessage: "",
      errStatus: false
    };
  },
  mounted() {
    //     input        
    this.$on("validate", this.validator);
  },
  methods: {
    //     
    validator() {
      const rules = this.myForm.rules[this.prop];
      const value = this.myForm.model[this.prop];

      //     
      const descriptor = { [this.prop]: rules };
      const schema = new Schema(descriptor);
      schema.validate({ [this.prop]: value }, errors => {
        if (errors) {
          this.errMessage = errors[0].message;
          this.errStatus = true;
        } else {
          this.errMessage = "";
          this.errStatus = "";
        }
      });
    }
  }
};

まずhtml構造にinputコンポーネントを置くスロットを残します.転送されたタイトル(label)、検証フィールドをpropsで取得します.form-itemコンポーネントの核心はvalidatorメソッドであり、まずメソッド内部でformコンポーネント上の検証規則とデータモデルを取得する必要がある.ここではprovide injectオプションによりvue 2である.2新しい内容.(このオプションは、コンポーネントの階層がどれだけ深いかにかかわらず、上下関係が成立した時間内に常に有効になるように、祖先コンポーネントがすべての子孫に依存を注入できるようにするために一緒に使用する必要があります(説明を行わず、公式ドキュメントを参照してください).ここでinjectが入ってきたmyFormは、formコンポーネントのprovideの変数で、formコンポーネントのインスタンスを注入すれば、検証ルールとデータモデルが得られるのではないでしょうか(両方ともformコンポーネントのインスタンスにあります).this.prop現在検証が必要なデータモデルのフィールド名により、対応する値と検証ルールテーブルのルールを取得できます.検証部はサードパーティ製ライブラリに導入する検証を行うが、その際に必要とされるのは、初期化Schemaのために使用するオブジェクトを構築することであり、フォーマットは{ : }、例えば{ [this.prop]: rules };、括弧中でthis.propを拡張するのはthisをpropの値をオブジェクトのkeyとします.次にvalidateメソッドを呼び出して検証します.
Form.vueファイルコードは次のとおりです.

    export default {
        provide(){
            return {
                myForm: this
            }
        },
        props:{
            model:{
                type:Object,
                required:true
            },
            rules:{
                type:Object
            }
        }
    }

html構造にform-itemコンポーネントのスロットが予約されており、propsはデータモデルと検証ルールを受信し、provideオプションを使用して自身のインスタンスを入力し、サブセットがアクセスデータモデルと検証ルールを使用するようにします.
この簡単なカスタムフォームコンポーネントで完了します.