How can I pass data from parent to nested components?

I'm creating a Vue3 web app and I was wondering what is the best way to pass data from parent to nested components (more specific, from parent to child of children).

Let's say I have this schema:

       Card
         |
         |
  CardHeader     CardBody
                    |
                    |
   BodyHeader  BodyParams  BodyResponse

And I want to know the best way to pass data from Card to BodyHeader, BodyParams and BodyResponse

On Card Component I will be fetching some data from an API. Lets say that i fetch a json like this:

{
  header: {
    title: 'hello header'
  },
  body: {
    headers: ['authorization', 'anotherheader']
    params: ['currency', 'hair'],
    response: ['200', '401']
  }
}

I know I just could do this:

<Card/> :

<template>
  <CardHeader :header="hedaer"></CardHeader>
  <CardBody :body="body"></CardBody> 
</template>

Then, in <CardBody/> :

<template>
  <CardBodyHeader :headers="body.headers"></CardBodyHeader>
  <CardBodyParams :params="body.params"></CardBodyParams>
  <CardBodyResponse :responses="body.responses"></CardBodyResponse>
</template>

<script>
import CardBodyHeader from "./CardBodyHeader.vue";
import CardBodyParams from "./CardBodyParams.vue";
import CardBodyResponse from "./CardBodyResponse.vue";

export default {
  components: { CardBodyHeader, CardBodyParams, CardBodyResponse },
  props: {
    body: {type: Object}
  }
};
</script>

But I don't know if that would be the optimal solution.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/XPF9rd3