如何在 VueJS 中组织嵌套的道具？

Question

我有一个奇怪的 organization/architecture 泡菜，我似乎无法理解。

假设我有 3 个组件，A -> B -> C，其中 A 是一个大 parent，B 是一个 parent，C 是一个 child。

A 将 object 的数组传递给 B。 B 遍历数组，将每个 object 传递给 C 的实例。其中一些 object 保证不会更改，而另一些可能会更改。

C 要求 object 中存在两个字段，例如 object.name 和 object.icon。这将在 C 的道具中指定。

我的问题是，使用组件 A 的开发人员必须查看 C 的 props 才能知道在 object 中向 B 提供哪些属性。如果我添加，这个问题只会变得更糟A 和 C 之间的更多组件。

我该如何构造它？我在想也许这就是商店的用武之地，但我一直认为商店是为了维持可以改变的状态。而A提供的一些object保证永远不变

Answer 1

我个人会在组件之间使用共享状态，或者如您所说，使用存储。当你想在组件之间维护一些数据时，存储特别有用，并且当其中任何一个发生变化时，它会在所有其他组件中更新。

简单示例：

var sourceOfTruth = {
  propThatChanges: {},
  immutable: {}
}

var vmA = new Vue({
  data: sourceOfTruth.propThatChanges
})

var vmB = new Vue({
  data: sourceOfTruth.propThatChanges
})

现在，每当 sourceOfTruth.propThatChanges 发生突变时，vmA 和 vmB 都会自动更新它们的视图。对于保证不会更改的对象，您可以简单地不将其传递给 C 组件，就像 sourceOfTruth.immutable 一样。或者您可以创建一个可供 A 而不是 B 或 C

可用的全新存储对象

Vue 文档中有更多信息，您应该查看一下： http://vuejs.org/guide/application.html#State-Management

如何在 VueJS 中组织嵌套的道具？

How to organize nested props in VueJS?

components

properties

vue.js