将嵌套对象名称作为 props 传递给组件

Question

我为我的表单制作了一个组件，我将主要对象作为道具传递给该组件。对于它的项目，我传递了一个 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

Answer 1

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

例如关于 'birth.date' 的问题 - 你不能将它传递给 v-model 因为 JavaScript 不知道将这个字符串作为一个深层对象来处理，所以当你尝试access 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
    }
}

将嵌套对象名称作为 props 传递给组件

Pass nested object name as props to component

javascript

object

vue.js

vue-component

nuxt.js