Vue3中如何获取组件所有refs并调用其暴露的方法？

方案1：统一子组件ref名称，自动收集为数组 #

这是最直接且推荐的实现方式，无需为每个子组件单独定义唯一ref：

1. 父组件中定义数组类型的ref：

const formElements = ref([])

2. 给所有<FormElement>子组件设置相同的ref属性值：

<FormElement ref="formElements" label="用户名" />
<FormElement ref="formElements" label="邮箱" />
<FormElement ref="formElements" label="密码" />

Vue会自动将所有匹配该ref名称的子组件实例收集到formElements.value数组中。

3. 编写批量验证方法：

const validateAll = async () => {
  let isFormValid = true
  // 遍历所有子组件实例，调用暴露的validate方法
  for (const element of formElements.value) {
    const isValid = await element.validate()
    if (!isValid) {
      isFormValid = false
      // 可选：遇到第一个不合法字段就停止验证
      // break
    }
  }
  return isFormValid
}

方案2：非<script setup>场景下使用$refs #

如果父组件采用传统选项式API而非<script setup>，可直接通过this.$refs遍历子组件：

methods: {
  async validateAll() {
    let isFormValid = true
    // 遍历所有ref，筛选出带validate方法的子组件
    Object.values(this.$refs).forEach(element => {
      if (element?.validate) {
        const isValid = await element.validate()
        if (!isValid) isFormValid = false
      }
    })
    return isFormValid
  }
}

注意：<script setup>中无法直接使用this和$refs，因此优先选择方案1。

关键注意事项 #

• 确保子组件已通过defineExpose正确暴露validate方法：

// FormElement组件的<script setup>
const validate = () => {
  // 你的验证逻辑，返回布尔值或Promise
}
defineExpose({ validate })

• 若验证逻辑是异步的（如后端接口校验），需使用async/await处理异步返回结果。

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