vue3 组件层层传入失去响应性

Question

因为涉及代码非常多取了一些说明.在做一个动态表单,从父级传入一个form对象fieldForm,层层传入到孙子级v-model="props.fieldForm[item.fieldName]"去绑定父级中的form对象,思路应该是没问题,但是在孙子级绑定不了,不知道为什么

// -----------------父级-----------------
<template>
  <el-form>
     <FormItem v-for="(item, index) in fieldList" :field-form="fieldForm" :item="item"></FormItem>
  </el-form>
</template>
<script>
const fieldForm = ref({
    ...
    ...
})
</script>
// -----------------子级-----------------
<el-form-item
    <Field :item="item" :field-form="props.fieldForm"></Field>
</el-form-item>
<script>
const props = defineProps({
    fieldForm: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
</script>

// -----------------孙子级-----------------
<el-input
    v-else-if="props.item.formType == 'text' || item.formType == 'mobile'"
    v-model="props.fieldForm[props.item.fieldName]"
/>
<el-input-number
    v-else-if="props.item.formType == 'number'"
    v-model="props.fieldForm[props.item.fieldName]"
/>
<script>
const props = defineProps({
  fieldForm: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
</script>

Answer 1

这样子写不就相当于子组件里面通过v-model这个语法糖去改父组件fieldForm的值了吗？我怀疑应该就是这个问题。

建议是先使用:value验证fieldForm有没有传入到子组件，然后在父组件里面改变fieldForm值看子组件是否有同步更新，基本就能确认问题了。