时间戳

首页 > 解决方案 > Vue：如何与父级的特定子组件通信

vue.js - Vue：如何与父级的特定子组件通信

问题描述

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

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

尽管可以通过 标识组件key，但我不明白如何才能到达特定元素（例如，我想更改由标识的特定元素的 a<span>中的内容）并更改其内容。my-orderkey

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

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

标签： vue.jsvue-component

解决方案

您只需要将动态数据放入orders.

前任：

服务器 API 返回此ordersjson：

[
  {
    "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

推荐阅读