pass reactive props from child to parent

Svelte

7/3/2022, 11:44:29 AM

by Leo Voon

Let say we have this kind of scenario,

// App.svelte
<script>
let valueToBeReactive = 'hello';
</script>

<Child inputValue={valueToBeReactive}/> // the child's prop called inputValue, ok 

{valueToBeReactive}  // ❌ this does not react to changes from Child

// Child.svelte

export let inputValue;


<input type="text" bind:value={inputValue}/>

{value} // this will be reactive within Child, ok

to get the same behavior in parent, we bind the child props to a var in Parent.

// App.svelte
let valueToBeReactive;

<Child bind:value={valueToBeReactive}

{valueToBeReactive} // ✅ now this works!

For example, see this REPL

https://svelte.dev/repl/af14304fb9d8416b854dc469d62e93ef?version=3.48.0