As a general rule, data flow in Svelte is top down — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
Sometimes it’s useful to break that rule. Take the case of the <input>
element in this component — we could add an oninput
event handler that sets the value of name
to event.target.value
, but it’s a bit... boilerplatey. It gets even worse with other form elements, as we’ll see.
Instead, we can use the bind:value
directive:
App
<input bind:value={name}>
This means that not only will changes to the value of name
update the input value, but changes to the input value will update name
.
previous next
1
2
3
4
5
6
7
8
<script>
let name = $state('world');
</script>
<input value={name} />
<h1>Hello {name}!</h1>