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

Question

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

我知道有两种方法：

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

我们假设一个用例与产品编辑视图配合使用，

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

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

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

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