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 必须显式绑定到模板元素上（如 <inputcomponent ref="inputValue0"></inputcomponent>），传统字符串拼接式访问失效。
✅ 正确做法：利用 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是一个普通 JavaScript 对象（非响应式），键为 ref 名（字符串），值为对应 DOM 元素或组件实例； - 模板中 ref 必须显式声明，例如：
<inputcomponent ref="inputValue0"></inputcomponent><inputcomponent ref="inputValue1"></inputcomponent><inputcomponent ref="inputValue2"></inputcomponent>
- 若 ref 绑定的是原生元素（如
<input ref="inputValue0">），则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 列表的首选方案。
