Vue3+TypeScript中如何访问动态模板ref并调用子组件validate方法

方案1：类型断言（最快实现） #

首先先定义所有表单项统一的公共接口：

// 可以根据你的validate方法实际返回值调整类型
interface IFormItem {
  validate: () => boolean | Promise<{ valid: boolean; msg?: string }>
}

在校验逻辑中先判断ref存在性，再做类型断言即可解决TS报错：

validate() {
  this.form.formFields.forEach((field) => {
    const key = field.configuration?.key
    // 跳过没有配置key的字段，避免报错
    if (!key || !this.$refs[key]) return
    const formItem = this.$refs[key] as IFormItem
    console.log(formItem.validate())
  });
},

方案2：提前声明$refs类型（避免多次断言） #

如果是Vue2基于类的组件写法，或者Vue3选项式API，可以直接在组件内声明$refs的类型，后续使用无需再单独断言：

// Vue2 类组件示例
@Component
export default class YourFormComponent extends Vue {
  // 声明$refs下所有动态key对应的实例类型都是IFormItem
  $refs: Record<string, IFormItem>

  validate() {
    this.form.formFields.forEach((field) => {
      const key = field.configuration?.key
      if (!key) return
      console.log(this.$refs[key].validate())
    });
  }
}

方案3：Vue3组合式API推荐：用Ref数组存储实例（避免动态key冲突） #

如果是Vue3项目，更推荐用ref数组存储动态生成的表单项实例，不用维护唯一key，类型定义更简单：

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

interface IFormItem {
  validate: () => boolean | Promise<{ valid: boolean; msg?: string }>
}
// 存储所有动态表单项的实例引用
const formItemRefs = ref<IFormItem[]>([])

const validate = () => {
  formItemRefs.value.forEach(item => {
    console.log(item.validate())
  })
}
</script>

<template>
  <div class="row" v-for="(formField, index) in form.formFields" :key="index">
    <boolean-form-item
      v-if="formField.fieldType == 'Boolean'"
      v-model="form.formFields[index]"
      :ref="el => el && (formItemRefs[index] = el)"
    ></boolean-form-item>
    <numeric-form-item
      v-if="formField.fieldType == 'Number'"
      v-model="form.formFields[index]"
      :ref="el => el && (formItemRefs[index] = el)"
    ></numeric-form-item>
    <dropdown-form-item
      v-if="formField.fieldType == 'Dropdown'"
      v-model="form.formFields[index]"
      :ref="el => el && (formItemRefs[index] = el)"
    ></dropdown-form-item>
  </div>
</template>

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