如何从父级获取数据到子级？

Posted 2023-02-23

【中文标题】如何从父级获取数据到子级？

【英文标题】：How to get data from parent into child?

【发布时间】：2020-06-20 00:48:45

【问题描述】：

我正在尝试将数据从父组件获取到子组件。

在下面的组件中，我正在循环遍历数组“组合”。 Portfolios 包含一个我想要获取的唯一 ID。 获得 ID 后，我想将 ID 发送到另一个组件。

我可以通过哪种方式做到这一点？

                <v-card-text v-for="(item, index) in portfolios" :key="index">
                  <v-card
                    dark
                    color="gradient"
                    elevation="4"
                    class="pa-2 ml-auto mr-auto justify-center"
                    max-
                  >
                    <v-list-item three-line>
                      <v-list-item-content color="red">
                        <div class="overline mb-2">
                          <v-chip color="white" light x-small>Depot-Nr: item.portfolio_id</v-chip>
                        </div>
                        <v-list-item-title
                          class="display-1 mb-1"
                        >formatPrice(item.portfolio_value)€</v-list-item-title>
                        <v-list-item-subtitle>
                          Einstandwert: formatPrice(item.investment_capital)€
                          <br />
                        </v-list-item-subtitle>
                      </v-list-item-content>
                      <v-list-item-avatar size="80" color="#fff">
                        <v-icon color="#243B55" large>mdi-bank</v-icon>
                      </v-list-item-avatar>
                    </v-list-item>
                    <template v-if="!item.funds.length"></template>
                    <template v-else>
                      <v-simple-table class="ml-4 mr-4" light>
                        <template v-slot:default>
                          <thead>
                            <tr>
                              <th class="text-left">ISIN</th>
                              <th class="text-left">Name</th>
                              <th class="text-left">Stückzahl</th>
                              <th class="text-left">Marktpreis</th>
                              <th class="text-left">Positionswert</th>
                              <th class="text-left mr-2">Kaufpreis</th>
                              <th class="text-left">Performance</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr v-for="(items,index) in item.funds" :key="index">
                              <td>items.isin</td>
                              <td class="font-weight-bold">items.fund_name</td>
                              <td>items.quantity</td>
                              <td>formatPrice(items.marketprice) €</td>
                              <td>formatPrice(items.positionswert) €</td>
                              <td>formatPrice(items.buying_price) €</td>
                              <td>items.performance %</td>
                            </tr>
                          </tbody>
                        </template>
                      </v-simple-table>
                    </template>
                    <v-list-item-action>
                      <v-layout row class="ml-auto">
                        <AddPortfolioFundComponent></AddPortfolioFundComponent> //I want to give item.portfolio_id to this component
                        <template v-if="!item.funds.length"></template>
                        <template v-else>
                          <SellPortfolioFundComponent></SellPortfolioFundComponent>
                        </template>
                      </v-layout>
                    </v-list-item-action>
                  </v-card>
                </v-card-text>

【问题讨论】：

您能否更具体地说明您希望“发送到”哪个组件。通常在 vue 中，你将 props 传递给子组件。 `

这能回答你的问题吗？ Pass data from parent to child component in vue.js

【参考方案1】：

在 vue 中，您将数据从父组件传递给子组件作为道具。当子组件需要向父组件传递数据时，子组件需要发出数据并由父组件捕获。检查此链接：https://vuejs.org/v2/guide/components.html

   <v-card 
     ... 
     v-for="(item, index) in portfolios"
     :key="index">
        <v-card-text>
            <v-list-item three-line>
                ...
            </v-list-item>
            <template v-if="!item.funds.length"></template>
            <template v-else>
                <v-simple-table class="ml-4 mr-4" light>
                    ...
                </v-simple-table>
            </template>
            <v-list-item-action>
                <v-layout row class="ml-auto">
                    <AddPortfolioFundComponent :portfolioId="portfolio_id"></AddPortfolioFundComponent>
                    ...
                </v-layout>
            </v-list-item-action>
        </v-card-text>
    </v-card>

子组件 AddPortfolioFundComponent 应该初始化一个 prop 以接受传递的值。

<template>
  <div>
    portfolioId
  </div>
</template>

<script>
export default 
    name: "AddPortfolioFundComponent",
    props: 
        portfolioId: 
            type: String,
            default: null
        
    
;
</script>

【参考方案2】：

从父级向子级发送数据：在父级组件中使用 prop ":"

<child-component
          :propName="value"
        />

在子组件中使用：

props: ["propName"]

```