Vue3+TypeScript如何给template refs传参并解决el为null问题

错误原因 #

原写法在:ref中直接执行refHandler($el, i)属于立即调用函数，并非将函数作为回调传给ref绑定。Vue的ref回调机制会自动将对应DOM元素作为唯一参数传入绑定的函数，主动调用的写法会破坏默认传参逻辑，因此拿到的el为null。

正确实现 #

模板代码 #

<input v-for="i in 5" :key="i" :ref="(el) => refHandler(el, i)" />

通过箭头函数返回闭包，提前捕获自定义参数i，Vue会自动将DOM实例传入回调的第一个参数el。

逻辑层代码 #

import { ref } from 'vue'

// 初始化存储ref的响应式数组，可根据业务调整长度或者动态扩容
const inputs = ref<(HTMLInputElement | null)[]>(new Array(5).fill(null))

const refHandler = (el: HTMLInputElement | null, index: number) => {
  // 元素卸载时Vue会传入null，非空判断避免赋值无效值
  if (el) {
    // v-for循环的i从1开始，数组下标从0开始，因此减1做对齐，不需要对齐可直接用index
    inputs.value[index - 1] = el
  }
}

注意事项 #

• 如果需要动态处理不定长度的v-for列表，可以不用提前初始化数组固定长度，直接按下标赋值即可，JS数组会自动扩容
• 如果需要保留元素卸载后的占位，可去掉非空判断，直接赋值inputs.value[index - 1] = el，方便后续判断元素是否存在

内容的提问来源于stack exchange，提问作者Rene Rowell de la Rama