[Vuejs]-How to get data from parent into child?

0πŸ‘

βœ…

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

enter image description here

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

0πŸ‘

to send data from parent to child: in parent compenent use prop β€œ:”

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

in child component use :

props: ["propName"]

```

Leave a comment