Nuxt3中如何循环遍历组件ref？Nuxt2代码迁移困惑

问题背景 #

在Nuxt2中，我们可以通过动态命名的$refs批量获取子组件实例，实现批量校验：

for (let i = 0; i < couponLength; i++) {
    let childComponent = this.$refs[`inputValue${i}`];
    let message = childComponent.checkRequired();
    if (message.result == false) {
        this.error_message.push(message.message);
    }
}

但迁移到Nuxt3后，由于没有this，且无法直接通过inputValue${i}这种动态方式关联ref，只能手动逐个定义ref再添加到数组里，每次新增输入组件都要修改代码，非常繁琐。

优化方案 #

方案1：利用v-for绑定数组Ref（推荐） #

如果你的输入组件是通过v-for循环渲染的，Vue3支持直接把ref绑定到数组变量上，框架会自动收集所有组件实例：

<template>
  <!-- 用v-for渲染输入组件，直接绑定ref到数组 -->
  <InputComponent 
    v-for="(item, index) in couponList" 
    :key="index" 
    ref="inputRefs" 
  />
  <button @click="validateAllInputs">校验</button>
</template>

<script setup>
import { ref } from 'vue'

// 存储所有输入组件的ref数组
const inputRefs = ref([])
const error_message = ref([])
// 假设couponList是你的数据源，新增组件只需要往这里加数据
const couponList = ref([/* 初始数据 */])

// 批量校验方法
const validateAllInputs = () => {
  error_message.value = []
  // 遍历数组里的组件实例，调用校验方法
  inputRefs.value.forEach(component => {
    const message = component.checkRequired()
    if (!message.result) {
      error_message.value.push(message.message)
    }
  })
}
</script>

这种方式下，新增输入组件只需要更新couponList的数据源，完全不用修改ref相关代码，最省心。

方案2：手动注册动态Ref（适用于零散组件） #

如果组件不是v-for渲染的，而是分散在模板中的，可以通过自定义指令自动注册ref到对象里：

<template>
  <InputComponent v-register-ref:first_name ref="first_name" />
  <InputComponent v-register-ref:last_name ref="last_name" />
  <InputComponent v-register-ref:area_code ref="area_code" />
  <!-- 新增组件时，直接加一行带指令的代码即可 -->
  <button @click="validateAllInputs">校验</button>
</template>

<script setup>
import { ref } from 'vue'

const error_message = ref([])
// 用对象存储所有注册的ref
const inputRefs = ref({})

// 自定义指令：自动把组件实例注册到inputRefs对象
const vRegisterRef = {
  mounted(el, binding) {
    // 获取组件的暴露实例（如果子组件用defineExpose暴露了方法）
    inputRefs.value[binding.arg] = el.__vueParentComponent?.exposed
  }
}

// 批量校验方法
const validateAllInputs = () => {
  error_message.value = []
  // 遍历对象里的所有组件实例
  Object.values(inputRefs.value).forEach(component => {
    const message = component.checkRequired()
    if (!message.result) {
      error_message.value.push(message.message)
    }
  })
}
</script>

新增组件时，只需要添加<InputComponent v-register-ref:xxx ref="xxx" />这一行，不用手动修改数组push的代码，比原来的方式高效很多。

注意：子组件需要通过defineExpose暴露checkRequired方法，父组件才能调用：

// 子组件InputComponent的<script setup>
defineExpose({
  checkRequired
})

内容的提问来源于stack exchange，提问作者lee tat chiu