Vue中子组件无法获取父组件Vuelidate校验规则，报$validator为空错误

问题根源 #

你调用useVuelidate时参数顺序完全错误：

• useVuelidate的第一个参数是配置对象（需包含validations字段指定校验规则），第二个参数才是要校验的响应式状态对象。
• 你把dataModel（状态对象）放在了第一个参数位置，导致Vuelidate内部初始化逻辑出错，触发了该报错。

另外父组件中动态给dataModel和rules添加属性的逻辑，在Vue3中虽能保持响应式，但建议用更规范的方式，不过这不是当前报错的直接原因。

修正后的代码 #

子组件（核心修正）

<script>
import { useVuelidate } from '@vuelidate/core';

export default {
  props: {
    rules: { type: Object, default: () => ({}) },
    dataModel: { type: Object, default: () => ({}) }
  },
  setup(props) {
    // 修正参数顺序：第一个是配置对象（含validations），第二个是状态对象
    const v$ = useVuelidate({ validations: props.rules }, props.dataModel);
    return { v$ };
  }
}
</script>

父组件优化（可选）

如果是Vue3，建议用ref定义对象以更明确地保持响应式（原逻辑也能工作）：

<script>
import ExampleForm from './components/ExampleForm.vue';
import { required } from '@vuelidate/validators';
import { ref } from 'vue';

export default {
  components: { ExampleForm },
  setup() {
    const dataModel = ref({});
    const rules = ref({});

    for(let i=0; i<5; i++){
      dataModel.value[`row${i}`] = null;
      rules.value[`row${i}`] = { required };
    }

    return { dataModel, rules };
  }
}
</script>

验证逻辑 #

修正参数顺序后，Vuelidate会正确关联校验规则和状态对象，初始化过程不会再出现$validator为null的情况。你可以在子组件模板中使用v$进行校验，比如：

<template>
  <div v-for="(value, key) in dataModel" :key="key">
    <input v-model="dataModel[key]" />
    <span v-if="v$[key].$error">该字段为必填项</span>
  </div>
</template>

内容的提问来源于stack exchange，提问作者swordgit