如何在 Nuxt 3 中动态访问所有模板 ref（无需手动声明每个 ref）

Nuxt 3 中无法直接使用 this.$refs，但可通过 getCurrentInstance().refs 获取所有已挂载的模板 ref，实现类似 Nuxt 2 的批量遍历逻辑，避免为每个组件重复声明 ref 变量。

Nuxt 3 中无法直接使用 `this.$refs`，但可通过 `getCurrentInstance().refs` 获取所有已挂载的模板 ref，实现类似 Nuxt 2 的批量遍历逻辑，避免为每个组件重复声明 ref 变量。

放在 Nuxt 2 里，这类写法大家都很熟：通过 this.$refs['inputValue' + i] 动态拿到一组子组件的 ref，再去调用它们的方法，比如 checkRequired()。可一旦切到 Nuxt 3 的 Composition API，情况就变了：this 这条路已经走不通了，而且 ref 需要明确绑定在模板元素上，例如 。也正因为如此，过去那种靠字符串拼接来访问 ref 的方式，在这里就不再适用了。

✅ 正确做法：利用 Vue 内部实例获取所有模板 ref
Nuxt 3（基于 Vue 3）仍保留组件实例的 refs 对象，可通过 getCurrentInstance() 安全访问（需确保在 onMounted 或生命周期钩子中调用，因 refs 在挂载后才可用）：

import { onMounted, getCurrentInstance } from 'vue'

onMounted(() => {
const instance = getCurrentInstance()
if (!instance) return

const errorMessages: string[] = []

// 遍历所有模板 ref（key 为 ref 名，value 为组件实例）
for (const [refKey, refValue] of Object.entries(instance.refs)) {
// 过滤出以 'inputValue' 开头的 ref（可按需调整匹配逻辑）
if (typeof refValue === 'object' && refKey.startsWith('inputValue')) {
try {
// 假设子组件暴露了 checkRequired() 方法
const result = (refValue as any).checkRequired?.()
if (result && !result.result) {
errorMessages.push(result.message)
}
} catch (e) {
console.warn(`Failed to call checkRequired on ${refKey}:`, e)
}
}
}

if (errorMessages.length > 0) {
// 统一处理错误（例如赋值给 reactive state）
// error_message.value = errorMessages
}
})

? 注意事项：

• getCurrentInstance() 返回的是当前组件的 ComponentInternalInstance，仅在 setup 钩子或生命周期内有效，不可在异步回调或事件处理器中无条件调用（可能返回 null）；
• instance.refs 是一个普通 Ja vaScript 对象（非响应式），键为 ref 名（字符串），值为对应 DOM 元素或组件实例；
• 模板中 ref 必须显式声明，例如：

• 若 ref 绑定的是原生元素（如 ），则 refValue 为 DOM 节点，不支持调用 checkRequired() —— 此方法必须由自定义组件提供；
• 更健壮的方案：结合 defineExpose 在子组件中明确导出方法，确保类型安全。

再往前走一步看，如果 ref 的数量会动态变化，比如列表是通过 v-for 渲染出来的，那么更稳妥的做法通常是使用 ref 数组，配合 v-for 的 ref 特殊语法来处理。Vue 3.3+ 已经支持 :ref="item => refs.push(item)"，不过这里有个前提别忽略：SSR 兼容性，以及 Nuxt 3 在服务端渲染场景下的相关限制，都需要提前考虑。话说回来，落到大多数表单校验场景里，getCurrentInstance().refs 依然是更省心的选择——写法简洁、兼容性也不错，还不用额外维护一份 ref 列表。