How does Svelte handle component communication between siblings?

In Svelte, communication between components can be facilitated through a parent component acting as a bridge, particularly when handling communication between sibling components. This typically involves the following steps:

1. Managing State with a Parent Component

Communication between sibling components typically requires a common parent component. The parent component can hold state and pass it to child components as props. Child components can retrieve the necessary data through these props.

2. Creating Mutable States

Svelte provides reactive state management by creating states using functions like writable or readable from svelte/store. These states can be subscribed to by multiple components, and all components subscribed to this state will automatically update when the state changes.

3. Communicating Using Specific Events

Sibling components can communicate by defining and triggering events. The parent component can listen to these events, update the state based on the event content, and then pass the updated state to other child components via props.

Example

Assume we have two sibling components, IncrementButton and DecrementButton, and their parent component Counter. We want IncrementButton and DecrementButton to affect the same counter value.

Here is how to implement this communication using Svelte:

html
<!-- Counter.svelte (Parent Component) -->
<script>
    import { writable } from 'svelte/store';
    import IncrementButton from './IncrementButton.svelte';
    import DecrementButton from './DecrementButton.svelte';

    let count = writable(0); // Create a writable store

    // Function to handle increment
    function handleIncrement() {
        count.update(n => n + 1);
    }

    // Function to handle decrement
    function handleDecrement() {
        count.update(n => n - 1);
    }
</script>

<div>
    <h1>Count: {$count}</h1> <!-- Directly subscribe to the value using $ -->
    <IncrementButton on:increment={handleIncrement} />
    <DecrementButton on:decrement={handleDecrement} />
</div>

html
<!-- IncrementButton.svelte -->
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    // Trigger increment event
    function increment() {
        dispatch('increment');
    }
</script>

<button on:click={increment}>Increment</button>

html
<!-- DecrementButton.svelte -->
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    // Trigger decrement event
    function decrement() {
        dispatch('decrement');
    }
</script>

<button on:click={decrement}>Decrement</button>

In this example, we coordinate the behavior of IncrementButton and DecrementButton through the parent component Counter. The parent component manages the counter state and updates it based on events received from child components. This way, even though these components are siblings, they can effectively communicate through the common parent component.