Question

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

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

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

C要求对象中有两个字段，比如object.name和object.icon。这将在C＆C的道具中指明。

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

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

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中组织嵌套道具？

1 个答案: