绑定Vuejs的两个组件 [英] Two components binding Vuejs

问题描述

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

How would be perfect to organize data and interaction between two vuejs components? For example: 1) i have one component

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

The main idea is when i click on list item i want to toggle the card with the same id, as list has. I use one file conponent management from vue webpack template.

推荐答案

许多人似乎都试图在没有商店的情况下使用Vue。你能成为其中之一吗？也许是因为商店不是Vue的严格一部分？也许是因为文件花更多的时间在亲子上沟通，事件等（复杂）比关于州管理（简单）？或许因为OO已经腐烂了我们的大脑？

A lot of folk seem to be trying to use Vue without a store. Could you be one of them? Perhaps because the store is not strictly part of Vue? Perhaps because the docs spend more time on parent-child communication, events etc (complicated) than on state management (simple)? Perhaps because OO has rotted our brains?

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

Vue wants to talk to a store. The whole point of bidirectional binding is to separate state from markup. The whole reason why this is such a genius idea is that many (most?) items of state have more than one representation on screen, like your items array. Your store, which can be as simple as a js object in window scope, should contain all your page state at a given moment. You should be able to copy-paste the store between pages, and be looking at the same thing on screen. The important qualities of a store are...

• 只有其中一个。


• 你对你的商店进行规范化，使状态项只存储一次，并且状态项之间存在最小的依赖关系。

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

Your items array should be in the store, and both components refer to this 'single source of truth'. If you're using other people's components, then you'll need to feed them some properties, but properties are for creating tunnels through Vue components to link leaf components with your store. Your items are your state, and state shouldn't generally live in Vue stuff. Does that help?

这篇关于绑定Vuejs的两个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！