elementUI 父组件怎么控制子组件中的表单验证_element 子组件表单验证

有时候会将子组件中的表单填完后的 save 事件 $emit 到父组件中，然后点击保存后怎么控制子组件中的表单验证呢？

简单来说就是在子组件内部提供一个验证方法 ，父组件验证子组件的表单实际上就是调用子组件的验证方法。

子组件中：

methods: {
  validate(callback){
    //这个form是子组件内部 el-form 的 ref="form"
    this.$refs.form.validate((valid) => {
      callback(valid)
    })
  }
}
1
2
3
4
5
6
7
8

父页面引入子组件 添加ref：

<child ref="form" @handleSave="save" />

<script>
import child from './components/child'
export default {
  components: {
    child
  },
  methods: {
    // 这个save方法是子组件中$emit过来的
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {...}
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

如果需要验证多个表单：

const a1 = new Promise((resolve, reject) => {
    this.$refs.form.validate((valid) => {
      if (valid) resolve()
    })
})

const a2 = new Promise((resolve, reject) => {
    this.$refs.form1.validate((valid) => {
      if (valid) resolve()
    })
})


Promise.all([p1, p2]).then(() => {
   //全部验证通过
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16