How to get data from parent into child?

Question

I'm trying to get data from a parent component to a child's component.

In the following component I'm looping trough the array 'portfolios'. Portfolios contains a unique ID, which I want to get. After I got the ID, I want to emit the ID to another component.

Which way could I do this?

                <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)}}€</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>

Can you be more specific about what component you wish to "emit to". usually in vue, you pass `props` to child components. ` — sparkyspider, Mar 07 '20 at 16:14
Does this answer your question? [Pass data from parent to child component in vue.js](https://stackoverflow.com/questions/39199303/pass-data-from-parent-to-child-component-in-vue-js) — Carol Skelly, Mar 07 '20 at 17:26

score 0 · Accepted Answer · edited Jul 15 '22 at 04:29

In vue you pass data from a parent to a child component as props. When a child needs to pass data to a parent component, the child needs to emit the data and the parent captures it. Check this link: https://v2.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>

The child component AddPortfolioFundComponent should have a prop initialized to accept the value being passed.

<template>
  <div>
    {{portfolioId}}
  </div>
</template>

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

score 0 · Answer 2 · answered Mar 08 '20 at 08:00

0

to send data from parent to child: in parent compenent use prop ":"

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

in child component use :

props: ["propName"]

```

answered Mar 08 '20 at 08:00

mai elrefaey

394
1
3
10

How to get data from parent into child?

2 Answers2