...

/

Passing Data From Parent to Child Component

Passing Data From Parent to Child Component

Learn how to pass down data from parent to child components.

We’ve created our first component. It’s time to make it dynamic by having it load data. First, we must decide where we’re going to define the data.

Storing data

There are two possible locations in which we can define the data: the post component or the app component. The best approach is to store the data in the parent component. It’s common practice to store data at the highest level possible.

There are a couple of reasons for doing so.

First, it allows the post component to remain reusable. If we stored data in the post component, then we’d have the same data in every instance of the component. We want to be able to output the post component with different data each time. Therefore, it’s better to store the data in the app component and pass it down to the post component. The post component will take the data and output it in the correct locations of the template.

Second, it allows us to share the same data with multiple components. ...