Vue3中向函数传参时如何保持数据响应性？解决双向绑定异常

• 响应性丢失根源：直接访问file.value.metadata会解包响应式对象，拿到的是普通JS对象。buildControls中model: metadata.owner存储的是原始值（字符串/数字），而非响应式引用——这导致文本框无法通过双向绑定同步更新原file.metadata的属性。
• reactive无效的原因：给controls套reactive仅让数组本身具备响应性，但数组内的model字段仍是独立的原始值，和file.value.metadata的属性没有绑定关联。修改控件值只会改变controls内的局部数据，无法同步回父组件的model。

核心思路是让每个控件的model字段成为指向原file.metadata属性的响应式Ref，同时让controls随file的更新自动重建：

1. 重构buildControls，用toRef创建属性引用 #

使用Vue的toRef方法，将metadata的每个属性转换为关联的Ref对象，这样修改model.value会直接同步到原metadata属性，反之亦然。

2. 将controls转为计算属性 #

依赖file.value，当父组件传入新文件时，controls会自动重新生成，确保控件内容同步更新。

修正后的完整代码 #

<script setup lang="ts">
import { toRef, computed } from 'vue';

interface FileMetadata {
  owner: string,
  location: string,
  size: number,
  // 其他50+字段...
}

interface File {
  fileName: string,
  metadata: FileMetadata
}

const file = defineModel<File>({ required: true });

const buildControls = (metadata: FileMetadata) => {
  return [
    {
      label: 'Owner',
      model: toRef(metadata, 'owner'), // 创建指向metadata.owner的响应式Ref
      type: 'text'
    },
    {
      label: 'Location',
      model: toRef(metadata, 'location'),
      type: 'text'
    },
    {
      label: 'Size',
      model: toRef(metadata, 'size'),
      type: 'number'
    },
    // 其他50+控件...
  ];
};

// 用computed让controls随file自动更新
const controls = computed(() => buildControls(file.value.metadata));
</script>

<template>
  <!-- 修正v-for的语法错误，直接绑定item.model -->
  <div v-for="(item, idx) in controls" :key="idx">
    <v-text-field v-model="item.model" :label="item.label" :type="item.type" />
  </div>
</template>

关键细节说明 #

• toRef(metadata, 'owner')：不会创建新的响应式值，而是引用原对象的属性，因此双向绑定的修改会直接同步到file.value.metadata，最终更新父组件的model。
• computed依赖file.value：当父组件传入新的File对象时，controls会自动重新执行buildControls，生成绑定新metadata的控件，实现数据同步。
• 修正template的v-for：原代码中item[idx].model是错误写法，直接使用item.model即可，因为v-for遍历出的item就是数组中的控件对象。

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