Pass value from Child to Parent in svelte - Intuition for the bind directive

Question

This is a super simple question, yet it bothers me that I am not completely understanding what is happening here, because I really like svelte and want to understand it.

There is this awesome video about passing data from a child to a parent: https://www.youtube.com/watch?v=lqvY_0gJf_I&list=PLoWoeRXn334kDuFrZqIqHrFCN71fSZE4X&index=1&t=1804s

Their first way of doing it id the two-way data binding.

It essentially works as in this REPL https://svelte.dev/repl/24adfb0a93734265952e2870155aeb49?version=3.43.1

I simply do not fully understand the flow of the data here (and in svelte in general). If I change something in the rendered Input-field this means essentially that I am changing something in the child, right? In this case I assume the

1. thing that happens is that the person variable in the child is changed by the user
2. As it has the bind directive, it somehow passes this data from the child to the parent
3. In the parent, the instance of the child component is initialized with passing the value of p (a variable initialized in the parent with a value) to the exported variable person from the child
4. somehow the variable p is changed in the parent by modyfing the value in the child and a reactive value in the child (the variable upper) is updated.

Now my question is: Why is this variable p updated and is there any intuitive understanding of this bind:<variable> directive. I simply can't wrap my head around it.

I think there are also other possibilities to pass data from a child to a parent (like with event dispatching). But lets start with this one;)

//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} />

Achromat

If you go to your posted REPL and click on the JS Output tab you can see the JS that your example is compiled to. You'll find svelte maintains an array of binding_callbacks and later you'll see the callbacks that were created for your various bindings. Try following this output code for a start. – Emelia

Thank you very much:) That helps indeed. Although I was looking more for an explanation in "plain english" I guess this compiled JS code will confuse me even more. Sorry, I guess this is probably the best help someone could give. It's just that I am just starting with JavaScript;) – Achromat

Answer 1

To intuitively understand you just have to imagine that both the child and the parent are referring to the same object.

Note that in your example if you add the following to App.svelte

<input type="text" placeholder="put the name here" bind:value={p} />

you'll see that updating the value in the parent also shows up the child. So the best way to understanding the bind: directive is that it doesn't make a copy, it really is one and the same object/value/reference... in both parent and child.

Bourges

Thanks a lot! And this object/value/reference is the variable p in this case right? Sorry, I think I just have a twist in my head🙈 Can I understand bind:value={p} as "updating the variable p kind of globally? – Achromat