Vue：当一个对象有很多属性时，如何将它作为道具传递给孩子？答案

【问题标题】：Vue: When an object has many properties, how do you pass it as a prop to a child?Vue：当一个对象有很多属性时，如何将它作为道具传递给孩子？
【发布时间】：2018-07-04 06:33:13
【问题描述】：

当一个对象有很多属性时，父级如何将一个对象传递给一个子级？

我不想使用“传递对象的属性”语法v-bind="myObject"，因为我必须单独定义子项中的所有属性（用于验证），而且列表会太长。

我不想使用“传递对象”语法v-bind:myObject="myObject"，因为我需要更改子属性的值，这会使它们在父对象中发生变异，从而违反'事件增加，突变减少'。

我可以将整个对象传递给孩子，然后制作属性的本地副本（通过在孩子的数据属性中返回它们）并修改它们。但是当我在父级（使用事件总线）中进行突变时，它们不会传播给子级。（换句话说，孩子的数据属性没有反应性）。

还有其他选择吗？

【问题讨论】：

如果孩子的数据属性是反应性的，它将覆盖本地修改。你想做什么？
@JacobGoh 我在父级中有一组类似的对象。每一个都构成了它自己的子组件。用户更新子字段中的字段，并使用 ajax 调用保存它们。 ajax 调用返回新保存的记录副本，我通过事件总线将其传递给父级。
Are you trying to use Vue without a store?
@bbsimonbb 我没有使用商店 - 虽然道具很大，但它是简单的父/子关系，没有其他真正的复杂性。
父子关系从来都不是简单的 ;-) 商店会更简单。

标签： vue.js

【解决方案1】：

这个功能可以通过 vue 现有的v-bind 功能实现

<!-- pass down parent props in common with a child component -->
<child-component v-bind="$props"></child-component>

这将传递所有道具，如果您有一个包装器组件并希望将所有道具传递给孩子，这将很有帮助。如果要包含/排除数据或道具，也可以使用计算值生成对象。

文档：https://vuejs.org/v2/api/#v-bind

【讨论】：