Esta es una pregunta súper simple, pero me molesta que no estoy entendiendo completamente lo que está pasando aquí, porque realmente me gusta svelte y quiero entenderlo.

Hay este increíble video sobre cómo pasar datos de un niño a un padre: https://www.youtube.com/watch?v=lqvY_0gJf_I&list=PLoWoeRXn334kDuFrZqIqHrFCN71fSZE4X&index=1&t=1804s

Su primera forma de hacerlo es el enlace de datos bidireccional.

Esencialmente funciona como en este REPL https://svelte.dev/repl/24adfb0a93734265952e2870155aeb49?version=3.43.1

Simplemente no entiendo completamente el flujo de datos aquí (y en general esbelto). Si cambio algo en el campo de entrada representado, esto significa esencialmente que estoy cambiando algo en el niño, ¿verdad? En este caso asumo la

1. lo que pasa es que la variable person en el niño es cambiada por el usuario
2. Como tiene la directiva bind , de alguna manera pasa estos datos del hijo al padre
3. En el padre, la instancia del componente hijo se inicializa pasando el valor de p (una variable inicializada en el padre con un valor) a la variable exportada person del hijo
4. de alguna manera , la variable p se cambia en el padre modificando el valor en el hijo y se actualiza un valor reactivo en el hijo (la variable upper ).

Ahora mi pregunta es: ¿Por qué se actualiza esta variable p y hay alguna comprensión intuitiva de esta directiva bind:<variable> ? Simplemente no puedo envolver mi cabeza alrededor de eso.

Creo que también hay otras posibilidades para pasar datos de un niño a un padre (como con el envío de eventos). Pero comencemos con este ;)

 //App.svelte <script> import Box from './inp.svelte' let p = 'MyName' $: nameUpper = p.toUpperCase() </script> <Box bind:person={p} /> <p>Reactive value in the parent component: {nameUpper}</p> <hr />

 // inp.svelte <script> export let person = 'valueInChild' </script> <input type="text" placeholder="put the name here" bind:value={person} />