组件校验猜测

在我们的日程编写中最常用的就是elementui提供的form表单校验，在输入的值发生改变时就会触发校验，这必然会让我们想到，校验时使用了监听。 如果是给子组件添加校验你，那么最好的方式就是给子组件添加发射事件。按照这个思路我们来看下网上给出的答案。

先上代码

父组件：

<template>
  <div>
    <el-form ref="testForm" :model="userInfo" :rules="rules">
      <el-form-item label="姓名:" prop="name">
        <el-input  v-model="userInfo.name" />
      </el-form-item>
      <el-form-item label="年龄:" prop="age">
        <testInput  v-model="userInfo.age" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import testInput from './name'

export default {
  data(){
    function checkAge(rule,value,callback){
      try{
        if(value===''){
          callback('年龄不能为空')
        }
        if(value<10){
          callback('太小了')
        }
        if(value>120){
          callback('咋，你比王八还能活呢')
        }
        callback()
      }catch(err){
        callback('出错了')
      }
    }
    return {
      userInfo:{
        name:'',
        age:'',
      },
      rules: {
        name: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
        age: [{require: true, validator: checkAge, trigger: 'blur'}],
      }
    }
  },
  components:{
    testInput
  },
  methods: {
    handleSubmit() {
      this.$refs['testForm'].validate((valid) => {
        if (valid) {
          // eslint-disable-next-line no-console
          alert('提交成功')
        }
      })
    }
  }
}
</script>
<style>
.el-form-item{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>

子组件：

<template>
  <div>
    <input ref="input"
           v-model="inputValue"
           @input="handleInput"
    />
  </div>
</template>
<script>
import emitter from 'element-ui/src/mixins/emitter';

export default {
  data(){
    return {
      inputValue:'',
    }
  },
  mixins:[emitter], // 混入的方式 , 加载到当前组件
  model:{ // 定义v-model如何去处理该组件 ,值属性定义、事件定义
    prop:"value",
    event:"custom"
  },
  props:{
    value:[String,Number],
  },
  mounted(){
    this.inputValue = this.value
  },
  watch:{
    inputValue(val){
      this.dispatch('ElFormItem', 'el.form.change', [val]);
    }
  },
  methods:{
    handleInput($event){
      this.$emit('custom',this.inputValue);
    },
  },
}
</script>

emitter

这是elementui中提供的一个插件，类似于vue当中的事件总线bus,可以跨越多层级的传递事件。他的作用就是下面的代码：

watch:{
  inputValue(val){
    this.dispatch('ElFormItem', 'el.form.change', [val]);
  }
},

ElFormItem是源码中自定义好的事件名，通过这个名称我们可以在输入的名称在发生改变时传递到父组件进行校验。

'el.form.change':是针对表单校验的方式，通常表单的校验方式就那么几个；change blur| fous

model: 对组件绑定的自定义， 我们一般都是对输入框或者选择框进行绑定或者是复选框。但是对于组件而言时就需要这个属性了。

举个例子：

父组件：

<template>
<div>
 <el-input v-model="val1"></el-input>
 <test-child v-model="Childval"/>
</div>
</template>

<script>
import testChild from "./formCheck/testChild";
export default {
 name: "testindex",
 components: {testChild},
 data(){
   return{
     val1:'',
     Childval:'',
     testvalue:11,
   }
 },
 watch:{
   Childval:{
     handler(val){
       // eslint-disable-next-line no-console
       console.log(val)
     }
   }
 }
}
</script>

<style scoped>

</style>

子组件：

<template>
  <div>
    <el-input value="12" v-model="val2"></el-input>
  </div>
</template>

<script>
export default {
  name: "testChild",
  data() {
    return {
      val2: ''
    }
  },
  model:{
     prop:'value',
     event:'val2_Change', //自定义事件名称，通过监听val2的变化，告知父级子组件中绑定的值就是当前的值
  },
  watch:{
    val2:{
      handler(val){
        this.$emit('val2_Change','绑定的数据发生了改变：'+val)
      }
    }
  }

}
</script>

<style scoped>

</style>

一般情况下我们要用的都是属性event,当我们的的输入值发生变化时，父组件打印如下：