So implementieren Sie die Multiform-Überprüfung von untergeordneten und übergeordneten Komponenten dynamisch gebundener Vue-Komponenten

Dieses Mal werde ich Ihnen zeigen, wie Sie mehrteilige und übergeordnete Komponenten von Vue-Komponenten mit dynamischer Bindung Formularüberprüfung implementieren und Hinweise zum Implementieren der Multiform-Überprüfung von Vue-Komponenten mit dynamischer Bindung implementieren von untergeordneten Komponenten Was sind sie? Hier sind tatsächliche Fälle.

In Front-End-Projekten gibt es häufig Dropdowns oder Registerkarten. Wenn Sie if, else oder switch verwenden, um die Auslastung zu beurteilen, gibt es viele redundante Code- und Variablendefinitionen wird generiert, und sie sind alle geschrieben. Gleichzeitig ist es für zukünftige Generationen schwierig, sie aufrechtzuerhalten.

Der Kern von Vue liegt in Komponenten, die über Tabs oder Dropdown-Boxen umgeschaltet werden können, ist es am besten, Unterkomponenten dynamisch zu laden.

Wie in der Abbildung gezeigt: Im SELECT-Ordner ist der Index nur für öffentliche Daten verantwortlich (natürlich können öffentliche Daten auch in andere Dateien geschrieben werden, sodass nur ein Eintragsdatei ), während mehrere Komponenten im Comp-Ordner dynamisch geladen werden.

Dynamisches Laden von Unterkomponenten: Komponente

// 给下拉框绑定下拉列表的索引
<el-select v-model="value" placeholder="请选择" style="float:left" @change="selectNum(value)">
     <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value">
     </el-option>
</el-select>

Führen Sie die Komponente ein, platzieren Sie sie in einem Array und steuern Sie den entsprechenden Index, um den Zweck des Ladens der Komponente zu erreichen

// 加载组件：每次下拉框监听则给changValue新赋值，如果下拉options的value从0开始则绑定组件时不用-1
<component :is="componentName[changValue - 1]" ref="subjectChild" @isSubmit="getSubmit"></component>

Die Formulare der untergeordneten und übergeordneten Komponente werden gemeinsam überprüft:

Die Schaltfläche wird in der übergeordneten Komponente platziert:

Untergeordnete Komponente: Angepasst

Validierungsregeln

data(){
  const num = (rule, value, callback) => {
    let num = /^\d+$/
    if(!value){
      return callback(new Error('数量不能为空'))
    }else if(!num.test(value)){
      return callback(new Error('数量必须为数字'))
    }else{
      callback()
    }
  }
  const price = (rule, value, callback) => {
    let num2 = /^\d+$/
    if(!value){
      return callback(new Error('单价不能为空'))
    }else if(!num2.test(value)){
      return callback(new Error('单价必须为数字'))
    }else{
      callback()
    }
  }
  return{
    // 验证
    apple:{
      num: '',
      price: '',
    },
    reg:{
      num: [
        { validator: num, trigger: 'blur' }
      ],
      price: [
        { validator: price, trigger: 'blur' }
      ]
    }
  }
// 验证
  submitForm(){
    this.$refs.apple.validate((valid) => {
      if(valid){
        this.$emit('isSubmit',["subject",true])
      }else{
        this.$emit('isSubmit',["subject",false])
        return false
      }
    })
  }

Übergeordnete Komponente:

 // 获取子组件状态
  getSubmit(type){
    this.isRule = type[1]
  },
// 公共数据验证
  submitForm2(){
    // 如果选中了子组件
    if(this.changValue){
      this.$refs.subjectChild.submitForm()
    }
    let _this = this
    let p1 = new Promise((resolve, reject) => {
      _this.$refs.ruleForm.validate((valid) => {
        if(valid){
          resolve()
        }
      })
    })
    if(_this.isRule){
      Promise.all([p1]).then(() => {
        console.log('正确')
      })
      .catch(() => {
        console.log('错误')
      })
    }else{
      console.log('错误')
    }
  },

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Wie man mit js Ajax-Funktionen und deren Verwendung kapselt

Was sind die am häufigsten verwendeten mathematischen Methoden? Funktionen in JS?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Multiform-Überprüfung von untergeordneten und übergeordneten Komponenten dynamisch gebundener Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!