Vue2+Vuelidate2：自定义npm组件库子组件校验失效问题

• 使用自定义npm组件库的子组件时，Vuelidate无法收集全部校验$errors和$silentErrors

问题背景 #

• 基于Vue2（Options API）开发组件库，在另一个Vue2（Options API）父项目中使用
• 组件库在Jest/StoryBook测试时，v$实例能正常返回完整校验信息，Vue调试工具可见
• 打包成npm包引入父项目后，父项目的v$实例仅返回自身校验信息，完全忽略库中子组件的校验规则
• 库组件均设置$autoDirty: true，组件渲染和功能正常，仅Vuelidate校验失效
• 需求要求校验规则必须定义在npm库组件内部，在父项目中统一校验

父Vue项目代码 #

<template>
    <div>
        <custom-input-component v-model="textValue"/>
            <span v-if="v$.value.$error" class="field validation-error">
              This field is required
            </span>
    </div>
</template>

<script>
    import { useVuelidate } from '@vuelidate/core';
    import { CustomInputComponent } from '@custom-components-library';
    
    export default{
        props:{...},
        data(){...},
        
          setup () {
            return {
              v$: useVuelidate()
            }
          },
        
        computed:{...}
        methods:{...}
    }
</script>

npm组件库代码 #

<template>
    <div>
        <label for="name">Name: </label>
        <input type="text" @input="$emit('input', $event.target.value)" :value="value">
    </div>
</template>

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

    export default{
        props:{
            value: {
                type: String,
                default: '',
            }
        },
        setup() {
            return {
              v$: useVuelidate({ $autoDirty: true }),
            };
        },
    
        validations() {
            return {
              value: {required},
            };
        }
        ...
    }
</script>

本地测试（Vue2+StoryBook）的v$校验对象 #

v$:Object (Computed)
    $anyDirty:true
    $clearExternalResults:function $clearExternalResults()
    $commit:function $commit()
    $dirty:true
    $error:false
    $errors:Array[0]
    ...
    value:
        $anyDirty:true
        $commit:function $commit()
        $dirty:true
        $error:true
        $errors:Array[1]
        $externalResults:Array[0]
        $invalid:true
        ...
        required:Object

父Vue项目的v$校验对象 #

v$:Object (Computed)
    $anyDirty:true
    $clearExternalResults:function $clearExternalResults()
    $commit:function $commit()
    $dirty:true
    $error:false
    $errors:Array[0]
    ...

浏览器控制台错误 #

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '$error')" 

组件库构建配置 #

{
    "compilerOptions": {
    "target": "es5",
    "module": "esnext"
  }
}

疑问 #

1. 如何让子组件在父Vue项目中正常校验？
2. 是否存在两个Vuelidate实例，父实例无法感知子组件的v$校验规则？
3. 能否实现在npm库组件内定义校验规则，同时在父项目中校验？

解决方案 #

问题根源 #

确实存在独立的Vuelidate实例：父项目和组件库各自初始化了自己的Vuelidate实例，两者完全隔离，父实例无法捕获子组件内部的校验状态。另外，组件库打包时可能将Vuelidate打包进了组件代码，导致与父项目的Vuelidate版本冲突或实例隔离。

具体解决步骤 #

1. 组件库侧：将Vuelidate设为外部依赖（peerDependency）

   • 在组件库的package.json中，将@vuelidate/core和@vuelidate/validators添加到peerDependencies，而非dependencies或devDependencies：

     "peerDependencies": {
       "@vuelidate/core": "^2.0.0",
       "@vuelidate/validators": "^2.0.0",
       "vue": "^2.6.0"
     }
     

   • 修改打包配置（如vue-cli或rollup），确保不将Vuelidate打包进组件库代码，让父项目提供这些依赖。这样组件库会复用父项目的Vuelidate实例，实现校验状态共享。

2. 组件库侧：暴露子组件的校验实例

   • 在子组件中，通过provide暴露内部的v$实例：

     // 组件库子组件的script部分
     import { provide } from '@vue/composition-api'; // Vue2需引入该包
     
     export default {
       // ... 原有代码
       setup() {
         const v$ = useVuelidate({ $autoDirty: true });
         provide('childV$', v$);
         return { v$ };
       }
     }
     

3. 父项目侧：收集并合并校验实例

   • 在父组件中，通过inject获取子组件的v$实例，使用mergeVuelidate合并父、子组件的校验逻辑：

     // 父项目组件的script部分
     import { useVuelidate, mergeVuelidate } from '@vuelidate/core';
     import { inject } from '@vue/composition-api';
     
     export default {
       setup() {
         const parentV$ = useVuelidate();
         const childV$ = inject('childV$');
         // 合并父、子组件校验实例
         const combinedV$ = mergeVuelidate(parentV$, childV$);
         return { v$: combinedV$ };
       }
     }
     

   • 若有多个子组件，可收集所有子组件的v$实例批量合并：

     const childV$s = inject('childV$s', []);
     const combinedV$ = mergeVuelidate(parentV$, ...childV$s);
     

4. 父项目侧：统一处理校验状态

   • 合并后的v$实例包含父、子组件的所有校验状态，可通过v$.$error判断整体校验结果，v$.$errors获取所有错误信息：

     <template>
       <div>
         <custom-input-component v-model="textValue"/>
         <span v-if="v$.value.$error" class="field validation-error">
           This field is required
         </span>
         <!-- 展示所有校验错误 -->
         <div v-for="error in v$.$errors" :key="error.$uid" class="validation-error">
           {{ error.$message }}
         </div>
       </div>
     </template>
     

额外注意事项 #

• 确保父项目与组件库使用的@vuelidate/core、@vuelidate/validators版本一致，避免版本冲突。
• Vue2项目使用Composition API需安装@vue/composition-api，并在入口文件注册：

  import Vue from 'vue';
  import VueCompositionAPI from '@vue/composition-api';
  Vue.use(VueCompositionAPI);
  

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