如何完美地组织两个 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 模板中的一个文件组件管理。
最佳答案
很多人似乎都在尝试在没有商店的情况下使用 Vue。你能成为他们中的一员吗？也许是因为商店严格来说并不是 Vue 的一部分？也许是因为文档在亲子沟通、事件等(复杂)上花费的时间比on state management更多。 (简单的)？也许是因为面向对象已经腐 eclipse 了我们的大脑？
Vue 想要与商店对话。双向绑定(bind)的重点是将状态与标记分开。这是一个如此天才的想法的全部原因是，许多(大多数？)状态项在屏幕上有多个表示形式，例如您的项目数组。您的商店可以像窗口范围内的 js 对象一样简单，应该包含给定时刻的所有页面状态。您应该能够在页面之间复制粘贴商店，并在屏幕上查看相同的内容。商店的重要品质是......
- 只有其中一个。
- 您“规范化”您的存储，以便状态项仅存储一次，并且状态项之间的依赖性最小。
您的商品数组应该位于商店中，并且两个组件都引用此“单一事实来源”。如果您使用其他人的组件，那么您需要为他们提供一些属性，但属性用于通过 Vue 组件创建隧道，以将叶组件与您的商店链接起来。你的项目就是你的状态，状态通常不应该存在于 Vue 的东西中。这有帮助吗？
关于javascript - 绑定(bind)Vuejs的两个组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47629353/