Props

Passing data from one component to another is done by declaring properties, or props. In Svelte, we do this via the $props rune.
ex.
in App.svelte

<script>
	import Nested from './Nested.svelte';
</script>
 
<Nested answer={42} />

in Nested.svelte

<script>
	let { answer } = $props();
</script>
<p>The answer is {answer}</p>
<!-- prints 42 as that was passed -->

Default values

We can declare default values in the prop declaration itself.
ex.

<script>
	let { answer = 'something interesting'} = $props();
</script>
<p>The answer is {answer}</p>

Now, if you don’t pass a value (i.e. <Nested/> instead of <Nested answer={42}/>) you will see the default value being used as fallback.

Spread syntax

If the properties of a variable correspond to a component’s expected props, we can ‘spread’ them onto a component.
ex.

<PackageInfo {...pkg}/>

Converesely, in PackageInfo.svelte you can get an object containing all the props that were passed into a component using a rest propery: let {name, ...stuff}. You can also skip destructuring altogether and use let stuff = $props() and then use a property’s object path to access it, ex. stuff.name.
For more info on the spread syntax, refer to my notes.