两个组件绑定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 模板中的一个文件组件管理。

Answer 1

很多人似乎试图在没有商店的情况下使用 Vue。你能成为其中之一吗？也许是因为 store 不是严格意义上的 Vue 的一部分？也许是因为文档在亲子交流、事件等（复杂）上花费的时间比在状态管理（简单）上花费的时间多？也许是因为面向对象已经腐烂了我们的大脑？

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

• 只有其中之一。
• 您“规范化”您的商店，以便状态项仅存储一次，并且状态项之间的依赖关系最小。

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