将数据传递到Vue JS中的子组件。最佳做法？

Question

我对将数据从父组件传递到子组件和模块化策略的最佳做法感到困惑。

据我所知，有两种方法：

1. 在父组件中获取数据，并通过props将数组/对象发送给子组件
2. 通过props将parent_id发送给孩子，并在孩子组件内获取数据

让我们假设一个用例与产品编辑视图一起工作，具有：

• 父组件product
• 用于编辑基本产品信息的子form组件
• 可链接/取消链接其他产品的子related_products组件。

[根据我的经验，第一种方法工作顺利，因为所有这些操作均在一次向API的请求中完成：在父组件中获取product对象，然后将props产品本身传递给form组件并嵌套对象指向related_products组件。另外，它可以在beforeRouteEnter防护中完成，因此可以同时显示父项及其所有子项以及所有信息。我在这里看到的缺点是，我们必须向子组件发送正确的对象结构，以避免任何错误，并且组件之间有很强的依赖性。

另一方面，通过通过parent_id将props发送到每个子组件，我们从任何逻辑中释放了父组件。在这种情况下，每个子组件都充当“黑匣子”，并获取/处理信息。我在这里看到的缺点是，我们必须执行2个API请求才能获取产品和相关产品。另外，beforeRouteEnter根本不可行，因此我们得到了一个空表格/表，直到检索到数据为止。

这与如何编写代码无关，只是根据您的经验，什么是最好的实现。

Answer 1

对象道具vs ID道具

[仅在数据对象属性与ID属性之间的耦合最小。无论哪种类型，都容易设想父母将道具传递给许多孩子，而孩子会接受多种父母的道具。而是在父级中获取而不是prop类型，这会导致代码变脆。

获取状态

对于非平凡的应用程序，此处缺少的原则是状态管理，并带有Vuex。您想要应用程序数据以及获取和访问数据的方法的唯一真实来源。

通过将所有这些保存在全局存储中，您可以从选择的任何位置（甚至包括应用程序安装之前）一次获取数据，并且所有组件都可以轻松访问该数据，从而使状态管理不受限制父母和孩子。