将数据传递给 Vue JS 中的子组件。最佳实践？答案

【问题标题】：Passing data to sub-components in Vue JS. Best practices?将数据传递给 Vue JS 中的子组件。最佳实践？
【发布时间】：2019-12-22 01:06:46
【问题描述】：

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

据我所知有两种方法：

在父组件中获取数据并通过 props 将 Array/object 发送给子组件
通过 props 将 parent_id 发送给子组件并在子组件中获取数据

让我们假设一个使用产品编辑视图的用例，具有：

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

根据我的经验，第一种方式运行顺利，因为它全部在对 API 的 1 个请求中完成：在父组件中获取 product 对象并将产品本身通过 props 传递给 form 组件和related_products 组件的嵌套对象。此外，它可以在beforeRouteEnterguard 中完成，这样父级及其所有子级会立即显示所有信息。我在这里看到的缺点是我们必须将正确的对象结构发送给子组件以避免任何错误，组件之间具有很强的依赖关系。

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

这不是关于如何编写代码，而是关于根据您的经验最好的实现。

【问题讨论】：

标签： vue.js vue-component parent-child vue-router modularity

【解决方案1】：

就我的经验而言，第一种方式更好。父组件充当“智能”，您可以访问它的生命周期挂钩以触发您的 api 请求、重置计时器等...我还建议使用 vuex，因为它允许您制作干净的界面您的父组件和“外部世界”之间的通信，使用actions 和getters。

话虽如此，您的“哑”子组件通过props 和emits 接口与其父组件通信。而且因为它是“愚蠢的”——它更容易测试或使用类似“故事书”的东西。

我们必须向子组件发送正确的对象结构以避免任何错误

我想，到头来，你还是需要正确的对象结构，对吧？不可能是随机的……

【讨论】：

谢谢，最近几周我一直在以这种方式工作，这似乎是最好的方法。关于 vuex，我仍然不相信这是重用组件的好习惯。想象一个使用 vuex 状态绑定 v-model 的产品表单组件。同时拥有超过 1 个组件将需要动态 vuex 模块注册，每个表单 1 个，这使得处理起来非常复杂。否则，所有组件都将绑定到相同的状态。