element-plus自定义组件如何自动触发表单校验

自定义组件触发rules方法

项目使用：vue3+element-plus
在我们使用element-plus的时候，经常会用到el-form和它的表单校验。
在使用model、rules、prop之后，就可以完美的触发表单校验。

但是！问题来了，当el满足不了我，我自定义组件表单组件 的 v-model的数据类型是数组或者对象的时候，它竟然无法自动触发校验，每次都需要我主动去在外围触发！（😟，条件都一样，我想问题应该是在我的组件上面！）

于是我去翻了一下element的源码，找到一个v-model可能是数组的组件（el-checkbox-group）

然后我在里面发现了这个,看起来像是监听值变化，触发了校验规则！

// packages\components\checkbox\src\checkbox-group.vue
import { useFormItem } from "element-plus";
import { debugWarn } from "element-plus/es/utils/error";
...
const { formItem } = useFormItem();
...
watch(
  () => props.modelValue,
  () => {
    if (props.validateEvent) {
      formItem?.validate('change').catch((err) => debugWarn(err))
    }
  }
)

于是我把它拷贝到我的组件里，竟然可以了（比想象的顺利很多）。
出于好奇，我来看看这个formItem方法是干啥的
于是我点了进去

const useFormItem = () => {
  const form = inject(formContextKey, void 0);
  const formItem = inject(formItemContextKey, void 0);
  return {
    form,
    formItem
  };
};

这里我们可能已经隐约猜到了什么！！它触发了爸爸们或者爷爷们的校验方法啦！
有兴趣的同学可以去el-form-item或者el-form中找一下如何验证的。

让我们继续向下看👇
其实我不想看了，目的已经达到了，当然能触发校验的方法有很多，但是我只知道这一个😒。

==============
一个人学习太辛苦了，欢迎共享前端资源，相互进步（Q群362909884）