vue3中用v-for循环出三个元素，绑定元素的ref并拿到这三个元素的ref属性

这种场景多在动态循环三个form表单的情况出现，以element UI为例：

简单来说就是用的ref的函数用法：:ref="el => (formRefs[index] = el)"

<template>
  <div>
    <el-form
      v-for="(item, index) in formModels"
      :key="index"
      :ref="el => (formRefs[index] = el)"
      :model="formModels[index]"
      label-width="80px"
    >
      <el-form-item label="Name">
        <el-input v-model="formModels[index].name"></el-input>
      </el-form-item>
      <el-form-item label="Age">
        <el-input v-model="formModels[index].age" type="number"></el-input>
      </el-form-item>
    </el-form>
    <button @click="logFormRefs">Log Form Refs</button>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const formRefs = ref([]);
const formModels = ref([
  { name: '', age: null },
  { name: '', age: null },
  { name: '', age: null }
]);
 
const logFormRefs = () => {
  console.log(formRefs.value);
};
 
onMounted(() => {
  //验证
  console.log('Mounted:', formRefs.value);
});
</script>
 
<style>
/* Add any necessary styles */
</style>