在自定义组件中使用 Element-UI 校验器

要给自定义组件也出现 Element-UI 校验的效果，可以使用 Element-UI 提供的校验器（Validator）组件，将其作为自定义组件的子组件，然后在自定义组件中使用该校验器组件来进行校验。

具体实现步骤如下：

引入 Element-UI 的 Validator 组件：

import { Validator } from 'element-ui';

将 Validator 组件作为自定义组件的子组件：

export default {
  components: {
    Validator
  },
  // ...
}

在自定义组件中使用 Validator 组件来进行校验：

<validator ref='validator'>
  <el-form-item label='用户名' prop='username'>
    <el-input v-model='username'></el-input>
  </el-form-item>
</validator>

// 在方法中调用校验方法
validate() {
  this.$refs.validator.validate((valid) => {
    if (valid) {
      // 校验通过
    } else {
      // 校验失败
    }
  });
}

在自定义组件中使用 Validator 组件后，就可以像 Element-UI 的表单组件一样，使用 prop 属性来指定校验规则，使用 validate 方法来进行校验了。