Vue中如何获取插槽内InputField子组件状态实现表单全局校验

实现方案（基于Vue3 官方最佳实践，无hack、全场景适配） #

这是组件库表单类功能的标准实现思路，核心用Vue内置的provide/inject API做跨层级组件通信，完全适配插槽嵌套、动态增删表单项等所有场景。

步骤1：改造Form.vue，提供全局表单上下文

在Form组件内维护所有表单项的注册列表，对外暴露注册/注销方法，内置全量校验逻辑：

<!-- Form.vue -->
<script setup>
import { ref, provide, computed, defineEmits } from 'vue'

const emit = defineEmits(['submit'])
// 存储所有已注册的InputField实例
const registeredFields = ref([])

// 向子组件暴露的上下文方法
const formContext = {
  registerField: (fieldInstance) => registeredFields.value.push(fieldInstance),
  unregisterField: (fieldInstance) => {
    const idx = registeredFields.value.findIndex(i => i === fieldInstance)
    idx > -1 && registeredFields.value.splice(idx, 1)
  }
}
provide('formContext', formContext)

// 全量校验所有表单项，提交时触发
const validateAll = () => {
  return registeredFields.value.every(field => field.validate() === true)
}
// 实时响应的表单全局合法状态
const isValid = computed(() => {
  return registeredFields.value.every(field => field.isValid === true)
})

// 表单提交拦截逻辑
const handleSubmit = (e) => {
  e.preventDefault()
  if (!validateAll()) return
  // 校验通过后抛出自定义提交事件
  emit('submit')
}
</script>

<template>
  <form @submit="handleSubmit">
    <slot />
  </form>
</template>

步骤2：改造InputField.vue，自动关联父级Form

InputField挂载时自动注册到父级Form，卸载时自动注销，不需要额外配置：

<!-- InputField.vue -->
<script setup>
import { ref, inject, onMounted, onUnmounted, defineModel, defineProps } from 'vue'

const props = defineProps({
  validation: {
    type: Function,
    default: () => true
  },
  // 其余原有props保留即可
})

const inputValue = defineModel()
const isValid = ref(true)

// 原有校验逻辑保留
const validate = () => {
  isValid.value = props.validation(inputValue.value)
  return isValid.value
}

// 注入父级Form的上下文，不存在则说明是单独使用InputField，不影响功能
const formContext = inject('formContext', null)
const fieldInstance = { validate, isValid }

onMounted(() => formContext?.registerField(fieldInstance))
onUnmounted(() => formContext?.unregisterField(fieldInstance))
</script>

<!-- 原有template内容保留即可 -->

方案优势

• 完全可复用：支持任意层级的插槽嵌套，即使InputField被包在其他布局组件内放在Form插槽里，也能正常识别
• 适配动态场景：支持动态增删表单项，注销逻辑会自动移除无效表单项的校验状态，不会出现校验误差
• 兼容单独使用：InputField不在Form组件内使用时，不会触发注册逻辑，原有功能完全不受影响
• 性能优异：基于响应式状态自动更新，无额外DOM查询、实例遍历开销

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