嵌套对象上的 VueJs v-bind.sync 不（不更新父对象

Question

大家好我正在构建一个巨大的表单，它应该上传一个带有嵌套对象的巨大对象。为了更方便的源代码管理，我决定将我的表单拆分为子组件并传递一个 v-bind.sync 指令进行双向更新，但我的子组件没有更新我的主要父对象我爸妈长得像

parent.vue

<template>
  <ChildOne
    v-bind.sync="assetData.CUSTOM_FAAS_PROPS"
  />
  <ChildTwo
    v-bind.sync="assetData.CUSTOM_PUBLICATION_PROPS"
  />

</template>
<script>
import ChildOne from '@/components/AssetForm/ChildOne.vue'
import ChildTwo from '@/components/AssetForm/ChildOTwo.vue'
export default {
  components: {
    ChildOne ,
    ChildTwo
  },
  data: () => ({
    assetData:{
      CUSTOM_FAAS_PROPS:{
        Description:{
          en:'',
          fr:''
        },
        Input:{
          data:{
            filekey:'',
            extension:''
          }
        }
      },
      CUSTOM_PUBLICATION_PROPS:{}

     
    }
  })
}
</script>

还有我的ChildOne.vue

<template>
  <input
    :value="Input.data.filekey"
    @input="$emit('update:Input.data.filekey', $event), logresult($event)"
  />
</template>

<script>
export default {
  props: {
    Description:{
      type: Object,
      default () {
        return {
          en:'',
          fr:''
        }
      }
    },
    Input:{
      type: Object,
      default () {
        return {
          data:{
            filekey:'',
            extension:''
          }
        }
      }
    }
  },
  methods: {
      logresult($event){
          console.log($event)
      }
  }

日志结果在控制台打印我的文本输入的内容，但父对象没有更新。我不知道如何将 v-bind.sync 用于嵌套对象

Answer 1

我终于找到了 vuex store 和 mapState 函数的解决方法

嵌套对象上的 VueJs v-bind.sync 不（不更新父对象

VueJs v-bind.sync on nested Object doesn(t update parent

parent-child

vue.js

vuejs2