Parent and Child Components

Modern frontend applications are built from many connected components. Some components manage other components, while others are responsible for displaying smaller pieces of the interface.

In Svelte, components often work together through parent and child relationships.

Understanding Parent Components

A parent component is a component that renders another component inside itself.

For example, App.svelte often acts as a parent component because it imports and displays other components.

<script>
  import ProfileCard from './ProfileCard.svelte';
</script>

<ProfileCard />

In this example, App.svelte is the parent component.

Understanding Child Components

A child component is a component rendered inside another component.

In the previous example:

<ProfileCard />

ProfileCard.svelte acts as the child component.

Child components are commonly used to organize reusable UI sections like:

• Cards;
• Buttons;
• Navigation items;
• Forms;
• Product components.

Passing Data Between Components

Parent components often pass data into child components using props.

<ProfileCard
  name="Alex Johnson"
  role="Frontend Developer"
/>

The child component receives the values through export let.

This allows components to remain reusable while displaying different content.

Organizing Larger Applications

As applications grow, components are usually organized into hierarchies.

For example:

• A page component may contain sections;
• Sections may contain cards;
• Cards may contain buttons and inputs.

This component-based structure helps applications remain easier to manage and scale.