将嵌套对象名称作为道具传递给组件答案

【问题标题】：Pass nested object name as props to component将嵌套对象名称作为道具传递给组件
【发布时间】：2021-07-12 01:59:17
【问题描述】：

我为我的表单制作了一个组件，我将主要对象作为道具传递给组件。对于它的项目，我传递了一个包含每个表单输入数据的 json。在此数据中，我传递属性名称以将 v-model 集成到它的相应数据中。将主要对象视为：

**parent**: <custom-input :personInfo="personInfo" :items="items"> </custom-input>

**child**: <input v-model="personInfo[propertyName]"/>


items: [
    {property: 'birth.date', ...}
]

personInfo : {
    name: '',
    birth: {
        date: ''
    }
}

所以对于日期字段，我必须将“birth.date”作为 v-model 名称传递给给出错误的组件。我应该如何在父组件中传递这个深层对象以及如何在子组件中访问它？

这里添加了一个代码沙箱： Codesandbox

【问题讨论】：

请制作一个 CodeSandbox。
添加了 Deniz。

标签： javascript vue.js object vue-component nuxt.js

【解决方案1】：

首先，我看到您正在从子组件中改变一个 prop，这是一种不好的做法，因此请考虑将其更改为在父组件上使用 v-model 或发出您想要更改的属性和值孩子交给父母。

例如关于 'birth.date' 的问题 - 你不能将它传递给 v-model，因为 JavaScript 不知道将此字符串作为深层对象来寻址，所以当你尝试访问 parsedInfo['birth.date'] 时，它看起来对于 parsedInfo 对象中的匹配字符串，而不是作为深层对象。

（如果解析的信息是：parsedInfo = { 'birth.date': '' } 它会找到一个值）

所以我认为实现目标的最简单方法是使用 lodash _.set(obj, property) 方法，请参阅：https://lodash.com/docs/4.17.15#set

如果你想将它与 v-model 一起使用，你可以使用带有 get 和 set 方法的计算属性，如下所示：

infoProperty: {
    get: {
      // return the info[property]
    }
    set: {
      // use the _.set(obj, property) method
    }
}

【讨论】：