如何在 VueJS 中组织嵌套的 props？答案

【问题标题】：How to organize nested props in VueJS?如何在 VueJS 中组织嵌套的 props？
【发布时间】：2016-05-19 18:49:54
【问题描述】：

我有这个奇怪的组织/架构泡菜，我似乎无法弄清楚。

假设我有 3 个组件，A -> B -> C，其中 A 是祖父母，B 是父母，C 是孩子。

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

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

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

我该如何构建它？我在想也许这就是商店会出现的地方，但我一直认为商店是为了维持可以改变的状态。并且 A 提供的一些对象保证永远不会改变。

【问题讨论】：

标签： properties components vue.js

【解决方案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

【讨论】：

如果不将不可变数据传递给 C 组件，您会怎么做？
我更新了示例以更好地显示 C 组件中的不可变数据。