Components & Communication via Props

Setting up props

In Svelte, you can give component props (properties), these are attributes that can be used to communicate between a parent and child properties.

Child.svelte

<script>
    const {
    name = "",
    age = null,
    } = $props();
</script>

<h2>This is a child Component</h2>
<p>My name is {name} and I'm {age}</p>

Parent.svelte

<script>
    import Child from '$lib/Child.svelte';
    let name = "Shento";
    let age = 16;
</script>
<Child name={name} age={age} />

If the prop and value are the same like this:

<Child value={value} />

You can use a shorthand of <Child {value} />

Children prop

In Svelte 5, the concept of "children props" is a way to pass content or elements from a parent component to a child component. This feature is particularly useful when you want to create components that can be more dynamic and reusable by allowing them to render different content depending on what the parent provides.

Parent.svelte

<script>
  import MyButton from "./MyButton.svelte";
</script>

<FunnyButton>Click me!</FunnyButton>

MyButton.svelte

<script>
  let { children } = $props();
</script>

<button>
  {@render children()} <!-- Click me! will appear here ->
</button>