elementUI自定义组件触发表单校验

在Element UI中，您可以使用$refs来访问自定义组件，并调用其内部方法来触发表单验证。以下是一个简单的例子：

1. 首先，确保您的自定义组件正确实现了表单验证逻辑，并暴露了一个方法来执行验证。
2. 在父组件中，使用ref属性为您的自定义组件设置一个引用名称。
3. 使用this.$refs.yourRefName.validate()来触发验证。

假设您的自定义组件名为CustomInput，并且它有一个validate方法：

<template>
  <div>
    <custom-input ref="customInput"></custom-input>
    <el-button @click="validateForm">验证</el-button>
  </div>
</template>
 
<script>
  export default {
    methods: {
      validateForm() {
        this.$refs.customInput.validate((valid) => {
          if (valid) {
            console.log('验证通过');
          } else {
            console.log('验证失败');
          }
        });
      }
    }
  }
</script>

在上面的例子中，CustomInput组件需要有一个validate方法，它接受一个回调函数，在验证完成时调用该回调函数，并传入一个布尔值表示验证结果。

确保CustomInput组件的validate方法如下：

export default {
  methods: {
    validate(callback) {
      // 这里实现具体的验证逻辑
      // 验证通过则调用 callback(true)
      // 验证失败则调用 callback(false)
    }
  }
}

这样，当您点击按钮时，validateForm方法将被触发，从而触发CustomInput组件内的验证方法。