javascript - 我可以将值传递给同级组件而不将其保存为变量吗？

Question

我有一些带有 v-for 语句的 Bootstrap vue 卡，我的一个标签返回一个基于 v-for 的当前迭代的值。我想将这个值传递给另一个标签，如果我在传递它之前将它保存为一个变量，那么所有迭代最终都会共享相同的变量，但我不希望这样。

<b-card-group v-for="(element, i) in array" :key="index">
    <b-card>
        <tag @update="updateFunction()" />
        <otherTag />
    <b-card />
<b-card-group />

我希望变量特定于当前迭代，这样 future 的迭代将无法访问它。

Answer 1

您基本上是在问两个问题，所以我将依次回答。

---

您似乎遇到的主要问题是您不知道如何区分 updateFunction 函数中的每张卡片。使 updateFunction 上下文感知的最简单方法是放置一个接受一个参数的箭头函数，并使用两个参数调用 updateFunction。

您的更新处理程序看起来像这样。您获取要更新的卡片的索引，以及从 sibling 发送的值。

methods: {
  handleUpdate(index, val) {
    this.$set(this.cards, index, val);
  }
}

然后使用箭头函数使更新处理程序上下文感知:

<tag @update="(value) => handleUpdate(index, value)" />

---

至于问题描述标题中的问题:如果您将值作为 Prop 传递，您有两种选择。你要么在 prop 中放置一个文字(例如 :my-prop="5")，要么在 prop 中放置一个变量(例如 :my-prop="myVariable")。第一个显然不允许您更改值，因此在这里不是很有用。第二个直接从父组件的状态中拉取数据。因此，如果不将数据保存在父组件中，就不可能将数据作为 prop 传递。

如上所示，这并不意味着您不能为 v-for 的不同迭代提供不同的数据。

还有其他方法可以通过使用 vuex 存储在兄弟之间共享数据，这在大型应用程序中特别有用。这将允许您将数据抽象成有用的“ block ”(或模块)，允许您使用 getter、突变和操作与其交互。您可以找到更多信息 using the official documentation .