How to update a child component from another child in svelte

Question

I have a select on car name which displays the car colour. When I input a car in the car field and it exists in the car list, I display the colour in Maintain (this works)

If I change the colour on the currently selected car and save the change, I want the updated colour to appear in the input box of the principle child (Cars)

It works if I re-select the car, but I want it to update as soon as the save button is clicked.

How can I get the colour to update on save?

Here is the REPL

App.svelte

<script>
    import Cars from './Cars.svelte'
    import MaintainCar from './MaintainCar.svelte'
    let cars = {'Audi': 'red', 'BMW':'blue', 'Hillman': 'green'}

    function maintenance() {
        console.log(cars)
    }
</script>

<main>
    <Cars cars={cars}/>
    <MaintainCar cars={cars} on:message={maintenance} />
</main>

Cars.svelte

<script>
    export let cars
    export let selected_car = ''
    let colour = ''
    let car_list = getCars(cars)
    $: colour = cars[selected_car]

    function getCars(cars) {
        let car_list = []
        for (const [key, value] of Object.entries(cars)) {
            car_list.push(key);
        }
        if (!selected_car) {
            selected_car = car_list[0]
            colour = cars[selected_car]
        }
        return car_list
    }

    function selectCar() {
        colour = cars[selected_car]
    }
</script>

<select bind:value={selected_car} on:click={selectCar}>
    {#each car_list as car}
        <option value={car}>
            {car}
        </option>
    {/each}
</select>
<input type="text" bind:value={colour} placeholder="colour"/>

MaintainCar.svelte

<div>
    <input type="text" bind:value={car} placeholder="car"/>
        <input type="text" bind:value={colour} placeholder="colour"/>
    <div>
        <button class="select-button" on:click={saveData}>Save</button>
    </div>
</div>

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    export let cars
    let car = ''
    $: colour = checkCar(car)

    function checkCar(car) {
        colour = '';
        if (car && car in cars) {
            colour = cars[car];
        }
        return colour
    }

    function saveData() {
        cars[car] = colour;
        car = ''
        colour = ''
        dispatch('message', {
            text: 'colour'
        });
    }
</script>

Answer 1

Well, if you want the info to descend one way, and come back the other way, you need... two-way binding!

Change:

<MaintainCar cars={cars} on:message={maintenance} />

to:

<MaintainCar bind:cars={cars} on:message={maintenance} />

Now this comes with a lot of cautionary notes...

First, it works only if, in the child component, you're assigning to the exact same variable that was bound from the outside. Like you happen to do now, but it's easy to lose this, as you extract an item from an array, a prop from an object or whatever. To sum it up, you have to be careful about what you do in the child component to support the way it is used from the outside, which is rarely a great situation.

A second warning is about two-way binding in general. While it can be very useful and save a lot of boilerplate in some situations, it can also lead to building a confusing network of hard to track dependencies, going up and down... So, use with care.

A generally more sound approach would be to use a store, that carries reactivity with itself, rather than relying on fragile and tricky chains of two-way bindings. Svelte makes that easy for you!

You could change your cars reactive variable in your parent component:

<script>
  const cars = writable({'Audi': 'red', 'BMW':'blue', 'Hillman': 'green'})

  // don't forget to prefix it with $ to access its _value_
  console.log($cars)
  ...
</script>

<!-- pass the store directly to children (not the value) -->
<Cars {cars}/>
<MaintainCar {cars} on:message={maintenance} />

Then the children can easily both access the value inside the store, or change it, with the changes being propagated back to any place that uses the store:

<script>
  export let cars

  function saveData() {
    $cars[car] = colour;
  }

  ...
</script>

...

See this REPL with your example converted to store.