绑定Vuejs的两个组件

Question

如何在两个vuejs组件之间组织数据和交互是完美的？例如： 1）我有一个组件

item(v-for="item in items)
 a {{item.name}}

2）和第二个

card(v-for="item in items")
 div.content
  img {{item.photo}}
  div {{item.desc}}
  button Details

主要的想法是，当我点击列表项时，我想切换具有相同ID的卡，如列表所示。我从vue webpack模板使用一个文件conponent管理。

Answer 1

很多人似乎都试图在没有商店的情况下使用Vue。你能成为其中之一吗？也许是因为商店不是严格的Vue的一部分？也许是因为文档花费更多时间在父母 - 孩子的沟通，事件等（复杂）上而不是on state management（简单）？也许是因为OO腐烂了我们的大脑？

Vue想和商店谈谈。双向绑定的重点是将状态与标记分开。这个天才想法的全部原因是许多（大多数？）状态的项目在屏幕上有多个表示，就像你的项目数组一样。您的商店可以像窗口范围中的js对象一样简单，应该包含给定时刻的所有页面状态。您应该能够在页面之间复制粘贴商店，并在屏幕上查看相同的内容。商店的重要品质是......

• 只有其中一个。
• 你'规范'你的商店，以便状态项只存储一次，并且状态项之间的依赖关系最小。

您的items数组应该在商店中，并且两个组件都引用了这个“单一事实来源”。如果您正在使用其他人的组件，那么您需要为它们提供一些属性，但属性用于通过Vue组件创建隧道以将叶组件链接到您的商店。你的物品是你的州，州一般不应该生活在Vue的东西。这有帮助吗？