CODEWITHSUNDEEP
javascriptfrontendreactive-programmingbindsvelte
Lenn
Lenn

Reputation: 1489

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

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

Upvotes: 7

Views: 4282

Answers (1)

Stephane Vanraes
Stephane Vanraes

Reputation: 16451

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.

Upvotes: 7

Related Questions