“Props Down, Events Up” is a fundamental pattern for managing state between components. This ensure’s reactivity is one way and the ownership of the state is with the parent.
- Props Down: The parent passes the reactive state to the child via props.
- Events Up: The child emits an event to notify the parent, which then updates the reactive state.
The following code demonstrates how button never interacts with the $state directly.
<script>
import Button from './Button.svelte'
let value = $state(0)
</script>
<p>parent value: {value}</p>
<Button {value} onclick={(v) => (value += v)} /><script>
let { value, onclick } = $props()
</script>
<p>child value: {value}</p>
<button onclick={() => onclick(1)}>add 1</button>