Vue3中如何通过ref获取v-for渲染子组件的输入值并实现父子双向绑定

核心问题原因 #

你遇到的问题本质是两个点：

1. 子组件仅做了props的单向绑定，没有监听输入事件向上同步数据，输入值只存在于input DOM节点上，父子组件都拿不到更新后的值
2. Vue3的<script setup>默认是封闭作用域，父组件即便拿到子组件ref，也无法直接访问子组件内部属性，需要主动暴露

方案一：多v-model双向绑定（更推荐，符合Vue数据流规范） #

你说无法使用v-model是误解，Vue3支持组件绑定多个v-model，完全兼容预定义的初始值，不需要用ref手动拿值，所有数据会自动同步到父组件的assetList中。

1. 修改子组件代码

<template>
  <label>
    <span>asset value</span>
    <input 
      type="number" 
      :value="modelValue" 
      @input="$emit('update:modelValue', $event.target.value)"
    />
  </label>

  <label>
    <span>target percentage</span>
    <input 
      type="number" 
      :value="targetPercentage" 
      @input="$emit('update:targetPercentage', $event.target.value)"
    />
  </label>
</template>

<script setup>
// 声明入参和抛出事件
defineProps(['modelValue', 'targetPercentage'])
defineEmits(['update:modelValue', 'update:targetPercentage'])
</script>

2. 修改父组件模板绑定

<Asset 
  v-for="(asset, index) in assetList"
  :key="index"
  v-model="asset.value"
  v-model:targetPercentage="asset.targetPercentage"
/>

3. 父组件补充逻辑

// 新增资产方法
const addAsset = () => {
  assetList.push({
    title: `Position ${assetList.length + 1}`,
    value: '',
    targetPercentage: '',
  })
}

// 提交方法直接读取assetList即可，所有值都是实时同步的最新值
const onSubmit = () => {
  console.log('所有表单值：', assetList)
  // 后续处理逻辑
}

方案二：通过ref获取子组件值（适合特殊场景必须用ref的情况） #

如果你确实需要通过ref手动获取值，需要子组件主动暴露内部的输入值。

1. 修改子组件代码

<template>
  <label>
    <span>asset value</span>
    <input type="number" v-model="localValue" />
  </label>

  <label>
    <span>target percentage</span>
    <input type="number" v-model="localTargetPercentage" />
  </label>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['value', 'targetPercentage'])
// 本地存储输入值，初始值用props传入的预定义值
const localValue = ref(props.value)
const localTargetPercentage = ref(props.targetPercentage)
// 暴露属性给父组件ref访问
defineExpose({
  value: localValue,
  targetPercentage: localTargetPercentage
})
</script>

2. 父组件提交时遍历ref数组取值

const onSubmit = () => {
  const formValues = assetsRefs.value.map(item => ({
    value: item.value,
    targetPercentage: item.targetPercentage
  }))
  console.log('所有表单值：', formValues)
}

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