vue.js - 如何从父级获取数据到子级？

Question

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

在下面的组件中，我通过数组“组合”循环。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-width="1000px"
                  >
                    <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)}}€&lt;/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)}} €&lt;/td>
                              <td>{{formatPrice(items.positionswert)}} €&lt;/td>
                              <td>{{formatPrice(items.buying_price)}} €&lt;/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.jsvuetify.js

Answer 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>