Vue+ElementUI で超大規模なフォーム例を処理する方法

// フォーム1 コンポーネント <テンプレート>
    <el-フォーム
      ref="フォーム"
      :model="フォーム"
      ラベル幅="10px"
    >
      <el-form-item label="名前" prop="名前">
          <el-input v-model="フォーム名" />
      </el-form-item>
    </el-form>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'Form1'、
    小道具: {
      形状： {}
  },
  データ（） {
    戻る {
      ルール:
        名前： [
          { 必須: true、メッセージ: '名前を入力してください'、トリガー: 'blur' }
        ]
      }
    }
  },
  メソッド: {
    // ここで親コンポーネントをループして検証validForm()を呼び出します。{
        結果 = false とする
        this.$refs.form.validate(有効 => 有効 && (結果 = true))
        結果を返す
    }
    // ここでは別の方法で書きましたが、ループしてチェックするときには Promise オブジェクトになります。問題があります。大物たちが私にアドバイスをくれることを願っています。validForm() {
        // ここでの出力構造は明らかにブール値ですが、親コンポーネントのループ呼び出し後はプロミス型なので、変換する必要があります。 return this.$refs.form.validate().catch(e => console.log(e))
    }
  }
}
</スクリプト>
 
// form2 コンポーネント <テンプレート>
    <el-フォーム
      ref="フォーム"
      :model="フォーム"
      ラベル幅="10px"
    >
      <el-form-item label="年齢" prop="年齢">
          <el-input v-model="form.age" />
      </el-form-item>
    </el-form>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'Form2'、
  小道具: {
      形状： {}
  },
  データ（） {
    戻る {
      ルール:
        名前： [
          { 必須: true、メッセージ: '年齢を入力してください'、トリガー: 'blur' }
        ]
      }
    }
  },
  メソッド: {
    // ここで親コンポーネントをループして検証validForm()を呼び出します。{
        結果 = false とする
        this.$refs.form.validate(有効 => 有効 && (結果 = true))
        結果を返す
    }
  }
}
</スクリプト>

// 親コンポーネント <テンプレート>
    <div class="parent">
        <form1 ref="form1" :form="formData.form1" />
        <form2 ref="form2" :form="formData.form2" />
        <el-button type="primary" @click="save">エラー</el-button>
    </div>
</テンプレート>
<スクリプト>
...参照を省略すると、export default {
    名前: '親'、
    ... 登録データを省略する() {
        戻る {
            フォームデータ: {
                フォーム1: {},
                フォーム2: {}
            }
        }
    },
}
</スクリプト>

メソッド: {
    保存 （） {
        //各フォーム オブジェクトのキー値、つまり各フォームの参照値 const formKeys = Object.keys(this.formData)
        // 各フォームの検証メソッドを実行します const valids = formKeys.map(item => this.$refs[item].validForm())
        // すべてのフォームが検証に合格した後のロジック if (valids.every(item => item)) {
          コンソール.log(11)
        }
    }
}

エクスポートデフォルト{
  小道具: {
    形状： {
      必須: true、
      タイプ: オブジェクト、
      デフォルト: () => {}
    },
  },
  メソッド: {
    有効なフォーム（）{
      結果 = false とする
      this.$refs.form.validate(有効 => 有効 && (結果 = true))
      結果を返す
    }
  }
}