Vue中对象属性绑定DOM的ref标签失效问题及实现方案咨询

Vue模板里的ref属性如果写字符串形式（比如ref="group.input2"），只会被当作单一的ref名称处理——Vue会尝试在当前作用域中查找名为group.input2的变量，而不是解析成group对象下的input2属性。这就导致你定义的group.input2和group.input3这两个ref根本没有被赋值，始终保持初始的null状态。而input1是直接绑定到顶层的ref变量，所以能正常获取DOM元素。

有两种常用的规范写法，都能实现用单个对象统一管理所有输入框的ref：

方法1：函数式ref + ref对象 #

直接在模板里给ref绑定一个函数，当DOM元素挂载/卸载时，Vue会自动调用这个函数并传入元素实例，你可以手动把元素赋值到目标对象的ref属性里：

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

// 用对象包裹所有表单ref
const formRefs = {
  input1: ref(null),
  input2: ref(null),
  input3: ref(null),
}

function main() {
  console.log("input1", formRefs.input1.value?.value)
  console.log("input2", formRefs.input2.value?.value)
  console.log("input3", formRefs.input3.value?.value)

  document.getElementsByTagName("textarea")[0].value = `
    input1: ${formRefs.input1.value?.value}
    input2: ${formRefs.input2.value?.value}
    input3: ${formRefs.input3.value?.value}
  `.trim()
}
</script>

<template>
  <!-- 用函数式ref手动赋值 -->
  <input :ref="el => formRefs.input1.value = el" type="text" value="1" />
  <input :ref="el => formRefs.input2.value = el" type="text" value="2" />
  <input :ref="el => formRefs.input3.value = el" type="text" value="3" />

  <button @click="main">click</button>

  <p>
    <textarea cols="30" rows="6"></textarea>
  </p>
</template>

方法2：reactive对象 + 函数式ref #

如果不需要单独的ref响应性，也可以用reactive包裹整个表单对象，这样不需要额外的.value层：

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

// 用reactive创建响应式表单对象
const formRefs = reactive({
  input1: null,
  input2: null,
  input3: null,
})

function main() {
  console.log("input1", formRefs.input1?.value)
  console.log("input2", formRefs.input2?.value)
  console.log("input3", formRefs.input3?.value)

  document.getElementsByTagName("textarea")[0].value = `
    input1: ${formRefs.input1?.value}
    input2: ${formRefs.input2?.value}
    input3: ${formRefs.input3?.value}
  `.trim()
}
</script>

<template>
  <input :ref="el => formRefs.input1 = el" type="text" value="1" />
  <input :ref="el => formRefs.input2 = el" type="text" value="2" />
  <input :ref="el => formRefs.input3 = el" type="text" value="3" />

  <button @click="main">click</button>

  <p>
    <textarea cols="30" rows="6"></textarea>
  </p>
</template>

注意点 #

• 函数式ref会在元素挂载时传入DOM实例，卸载时传入null，能自动处理元素的生命周期。
• 如果是循环生成的输入框，可以把函数改成带参数的形式，比如:ref="el => formRefs[input${index}] = el"，灵活适配动态表单。

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