How to get data from parent into child? - vue.js

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>

Answer 1

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>

Answer 2

to send data from parent to child: in parent compenent use prop ":"
<child-component
:propName="value"
/>
in child component use :
props: ["propName"]
```