Got it, let's tackle this problem—you're looking for a Vue 3 equivalent to Angular's @ViewChildren to collect all your form field components (MyInput, MySelect) inside MyForm and call their validate() methods on submit. Here's how to do it properly:

Best Approach: Use Provide/Inject for Component Registration #

This method is clean, reliable, and aligns with Vue's component communication patterns. It lets field components automatically register themselves with the parent MyForm, regardless of how deeply nested they are in slots.

Step 1: Update MyForm.vue to Manage Field Registration #

We'll create a registry to track all form fields, provide methods for fields to register/unregister themselves, and handle validation on submit:

<script lang="ts" setup>
import { ref, provide, onUnmounted } from 'vue';

// Define emit events for form submission status
const emit = defineEmits(['submit', 'invalid']);

// Store all registered form field components (those with a validate() method)
const formFields = ref<Array<{ validate: () => boolean }>>([]);

// Register a field component with the form
const registerField = (field: { validate: () => boolean }) => {
  formFields.value.push(field);
};

// Remove a field component from the registry (cleanup on unmount)
const unregisterField = (field: { validate: () => boolean }) => {
  const index = formFields.value.indexOf(field);
  if (index !== -1) {
    formFields.value.splice(index, 1);
  }
};

// Provide the registry methods to child components via Vue's inject system
provide('formRegistry', { registerField, unregisterField });

const submitForm = () => {
  let isFormValid = true;

  // Loop through all registered fields and run validation
  formFields.value.forEach(field => {
    const isValid = field.validate();
    if (!isValid) {
      isFormValid = false;
    }
  });

  // Trigger appropriate event based on validation result
  if (isFormValid) {
    emit('submit');
  } else {
    emit('invalid');
  }
};
</script>

<template>
  <slot />
  <div @click="submitForm">
    <slot name="button" />
  </div>
</template>

Step 2: Update Field Components (MyInput, MySelect) to Register Themselves #

Add logic to your field components to register with the parent form when mounted, and unregister when unmounted. Here's an example for MyInput.vue:

<script lang="ts" setup>
import { inject, onMounted, onUnmounted, ref } from 'vue';

// Inject the registry methods from the parent MyForm
const formRegistry = inject<{ 
  registerField: (field: { validate: () => boolean }) => void,
  unregisterField: (field: { validate: () => boolean }) => void 
}>('formRegistry');

const inputValue = ref('');
const errorMessage = ref('');

// Your field-specific validation logic
const validate = () => {
  if (!inputValue.value.trim()) {
    errorMessage.value = 'This field is required';
    return false;
  }
  errorMessage.value = '';
  return true;
};

// Register the field when it mounts
onMounted(() => {
  if (formRegistry) {
    formRegistry.registerField({ validate });
  }
});

// Clean up the registration when the field unmounts
onUnmounted(() => {
  if (formRegistry) {
    formRegistry.unregisterField({ validate });
  }
});
</script>

<template>
  <div>
    <input v-model="inputValue" type="text" />
    <span v-if="errorMessage" class="text-red-500">{{ errorMessage }}</span>
  </div>
</template>

Repeat this pattern for MySelect—the only difference will be your specific validation logic for the select field.

Alternative: Traverse DOM to Find Field Components #

If you prefer a more direct (but less robust) approach, you can traverse the form's DOM to find Vue component instances with a validate() method. Note this relies on Vue's internal __vnode property, which could change in future versions.

Update MyForm.vue for DOM Traversal #

<script lang="ts" setup>
import { ref, nextTick } from 'vue';

const emit = defineEmits(['submit', 'invalid']);
const formRoot = ref<HTMLElement | null>(null);

// Recursively find all field components with a validate() method
const getFormFields = () => {
  const fields: Array<{ validate: () => boolean }> = [];

  const traverse = (element: Element) => {
    // Check if the element is a Vue component with an exposed validate method
    const vueComponent = (element as any).__vnode?.component;
    if (vueComponent && typeof vueComponent.exposed?.validate === 'function') {
      fields.push(vueComponent.exposed);
    }

    // Recurse through child elements
    element.children.forEach(child => traverse(child as Element));
  };

  if (formRoot.value) {
    traverse(formRoot.value);
  }

  return fields;
};

const submitForm = async () => {
  await nextTick(); // Ensure DOM is up-to-date before traversal
  const formFields = getFormFields();

  let isFormValid = true;
  formFields.forEach(field => {
    const isValid = field.validate();
    if (!isValid) {
      isFormValid = false;
    }
  });

  if (isFormValid) {
    emit('submit');
  } else {
    emit('invalid');
  }
};
</script>

<template>
  <div ref="formRoot">
    <slot />
    <div @click="submitForm">
      <slot name="button" />
    </div>
  </div>
</template>

For this to work, you must expose the validate() method in your field components using defineExpose:

// Add this to MyInput/MySelect script setup
defineExpose({ validate });

Why the First Approach is Better #

• Stability: Doesn't rely on Vue's internal properties (like __vnode), so it's less likely to break in future updates.
• Flexibility: Works regardless of how deeply your fields are nested in slots or DOM elements.
• Cleaner: Follows Vue's intended component communication patterns (provide/inject) instead of DOM hacking.

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