vue3在循环列表里动态加上ref

需求是多个不同场景的相同表单，封装成一个组件在列表中循环

方法一：函数模板引用

首先定义一个数组

const myRefs = ref([])

然后在模板上绑定，箭头函数获取每个当前的ref然后存到之前的数组里

<div class="list" v-for="(v, k) in data.list">
    <MyComponent :form="v.form" :ref="(el) => (myRefs[k] = el)" />
</div>

最后循环执行你的组件方法，如果是异步方法使用Promise.all

Promise.all(myRefs.value.map(async (formRef, k) => {
 // 这是我定义的一个validate并返回form的组件方法
    const form = await formRef.saveEdit()
    console.log(form)
    data.list[k].form = form
})).then(() => {
    // 全部执行完成后
})

更新：

方法二：v-for 中的模板引用

需要 v3.2.25 及以上版本

定义一个数组然后直接绑定在v-for同一级，注意这个写法虽然简单，但是不保证refs里的顺序和list的顺序一致，如果需要按顺序获取每个ref，最好还是用第一种写法。

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

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>