Question

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

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

尽管key可以标识一个组件，但我不知道如何到达特定元素（例如，我想更改特定{{1}的<span>中的内容}}由my-order标识）并更改其内容。

key

比方说Orders Order [key=1] Order [key=2] Order [key=3]在后端已经更新，我想在客户端反映这一变化。因此，我想在客户端中更新此特定的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

，则跨度将不会呈现

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

1 个答案: