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
person
en el niño es cambiada por el usuariobind
, de alguna manera pasa estos datos del hijo al padrep
(una variable inicializada en el padre con un valor) a la variable exportada person
del hijop
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} />
Para comprender intuitivamente , solo tiene que imaginar que tanto el niño como el padre se refieren al mismo objeto.
Tenga en cuenta que en su ejemplo, si agrega lo siguiente a App.svelte
<input type="text" placeholder="put the name here" bind:value={p} />
verá que actualizar el valor en el padre también muestra el hijo. Entonces, la mejor manera de entender la directiva bind:
es que no hace una copia, realmente es el mismo objeto/valor/referencia... tanto en el padre como en el hijo.