Vue：如何与父级的特定子组件通信

Question

我想将服务器发送的数据传递给指定的子组件。这就是我将组件添加到父组件的方式：

<my-order v-for="order in orders" :key="order.id" :generalData="order"></my-order>

虽然可以通过key 识别组件，但我不明白如何才能到达特定元素（例如，我想更改由@987654325 识别的特定my-order 的<span> 中的内容@) 并更改其内容。

Orders
    Order [key=1]
    Order [key=2]
    Order [key=3]

假设Order [key=2] 已在后端更新，我想在客户端反映该更改。所以我想在客户端更新这个特定的Order [key=2]。

Answer 1

您只需将动态数据放入orders。

例如：

服务器 API 返回此 orders json：

[
  {
    "id": 1,
    "value": 100,
    "some_data": null
  },
  {
    "id": 2,
    "value": 50,
    "some_data": "Anything you can think"
  },
  {
    "id": 3,
    "value": 75,
    "some_data": null
  }
]

在您的组件中，您只需使用数据：

<my-order v-for="order in orders" :key="order.id" :generalData="order">
    //Inside the component

    <span v-if="generalData.some_data !== null">{{generalData.some_data}}</span>

    //End Inside Component
</my-order>

这样，每个order 都会得到你唯一的数据，或者如果some_data 是null，span 将不会呈现