Vue 3 中怎么用 ref 实现表单多个输入项的双向绑定-Vue.js-PHP中文网

vue 3 中推荐用多个 ref 管理表单多输入项，每个 ref 对应一个字段并用 v-model 绑定，语义清晰、易维护；也可用 reactive + torefs 统一管理并解构使用。

vue 3 中怎么用 ref 实现表单多个输入项的双向绑定

在 Vue 3 中，ref 本身不直接支持“双向绑定”语法（如 v-model 那样自动同步），但你可以用 ref 存储输入值，并结合 @input 或 @change 手动更新，从而实现对多个表单输入项的精细化控制。不过更推荐、更简洁的方式是：**用 ref 获取 DOM 元素引用，再配合响应式数据（如 ref 或 reactive）做值管理**——这才是实际开发中“用 ref 实现表单多输入项双向绑定”的常见含义。

用 ref 管理多个输入值（推荐：语义清晰、易维护）

为每个输入项单独定义一个 ref，并在模板中用 v-model 绑定它们。虽然用了多个 ref，但这是完全合法且 Vue 官方推荐的做法：

每个 ref 对应一个字段，逻辑隔离，调试和验证都方便
v-model 在 Vue 3 中默认对 ref 值做双向同步（底层调用 .value）
提交时直接读取各 ref.value 即可

示例：

import { ref } from 'vue'

export default {
  setup() {
    const username = ref('')
    const email = ref('')
    const age = ref(0)

    const submit = () => {
      console.log({ username: username.value, email: email.value, age: age.value })
    }

    return { username, email, age, submit }
  }
}

模板中：

<input v-model="username" placeholder="用户名"><input v-model="email" type="email" placeholder="邮箱"><input v-model.number="age" type="number" placeholder="年龄"><button>提交</button>

用 ref 获取 DOM 元素并手动同步（适合特殊场景）

当你需要直接操作原生 input 元素（比如聚焦、选择文本、兼容非标准控件），可用 ref 获取 DOM 引用，再通过事件手动赋值：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

给每个 <input> 添加 ref 属性（如 ref="userInput"）
在 setup 中用同名 ref(null) 接收，确保类型是 HTMLInputElement | null
监听 @input，把 $event.target.value 赋给对应响应式变量

示例：

import { ref, reactive } from 'vue'

export default {
  setup() {
    const userInput = ref(null)
    const emailInput = ref(null)
    
    const formData = reactive({
      username: '',
      email: ''
    })

    const handleUsernameInput = (e) => {
      formData.username = e.target.value
    }
    const handleEmailInput = (e) => {
      formData.email = e.target.value
    }

    // 提交时可直接访问 formData
    const submit = () => {
      console.log(formData)
      // 也可主动聚焦：userInput.value?.focus()
    }

    return {
      userInput,
      emailInput,
      formData,
      handleUsernameInput,
      handleEmailInput,
      submit
    }
  }
}

模板中：

<input ref="userInput" :value="formData.username" placeholder="用户名"><input ref="emailInput" :value="formData.email" type="email" placeholder="邮箱">

统一管理多个字段：用 reactive + toRefs（兼顾结构与解构）

如果字段较多，用多个 ref 会略显冗余；这时可用 reactive 定义对象，再用 toRefs 解构，保持模板中仍能用 v-model：

reactive 创建响应式对象，天然支持嵌套和批量操作
toRefs 把对象每个属性转为独立 ref，避免解构后丢失响应性
模板中仍写 v-model="username"，和单个 ref 写法一致

示例：

import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const form = reactive({
      username: '',
      email: '',
      password: '',
      remember: false
    })

    const submit = () => {
      console.log(form) // 直接用 reactive 对象提交
    }

    return {
      ...toRefs(form), // 解构出 username、email 等 ref
      submit
    }
  }
}