Which is the best/most idiomatic way to communicate with components in Svelte?

Question

I am trying to understand how to communicate with Svelte components. In my app I have created two components. In one, Antescript.svelte, I communicate with App.svelte using bind; in the other, Postscript.svelte, I communicate using dispatch.

Is one method preferred over the other?

Might I encounter problems using on method rather than the other?

The dispatch method certainly takes more coding, is that a problem?

REPL

App.svelte

<h1>{antescript} {junction} {postscript}</h1>
<div>
    <AnteScript bind:antescript={antescript}/>
</div>
<div>
    <PostScript on:message={postscriptChanged} {postscript}/>
</div>

<script>
import AnteScript from "./AnteScript.svelte";
import PostScript from "./PostScript.svelte";
    
    let antescript = 'start';
    let junction = 'and';
    let postscript = 'finish';
    
    function postscriptChanged(event) {
        postscript = event.detail.text;
    }
</script>

AnteScript.svelte

<input type="text" bind:value={antescript} />

<script>
    export let antescript;
</script>

PostScript.svelte

<input id="postscript" type="text" on:input={textChanged} value={postscript}/>

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    
    export let postscript;
    
    function textChanged() {
    let postscript_input = document.getElementById("postscript");
    dispatch('message', {
        text: postscript_input.value
    });
    }
</script>

Your comment down below: *I'm sure I've read somewhere that bind can cause problems* ~ you might refer to [this question](https://stackoverflow.com/questions/71646998/how-to-update-a-child-component-from-another-child-in-svelte) Binding can make problems if you overuse it and connect too much values between various components and lose track of what changes happen when from where. So it can be said *use it with caution*. But it can save boilderplate like in your example here, just compare the length of both versions. No argument for using dispatch in this case comes to my mind... — Corrl, Apr 13 '22 at 13:29
*The dispatch method certainly takes more coding, is that a problem?* ~ Less code is probably faster and easier understood (for others that read your code and for yourself). Look at this again after some time and see how long it takes for you to get what's happening in each component... Keeping things simple might seem boring, but might on the other hand save time and nerves — Corrl, Apr 13 '22 at 13:37

score 5 · Accepted Answer · answered Apr 13 '22 at 11:49

Svelte proposes multiple ways to communicate between components. It depends mostly on the relationship between the component and how the components should react to change:

From a parent component to communicate values to direct children, you can use properties and binding
From a child component to its parent, events can be used
From a parent component to communicate values to indirect children, you can use a context
For a global communication between all components, stores will be used

The following article will give you more details: https://betterprogramming.pub/6-ways-to-do-component-communications-in-svelte-b3f2a483913c

The way you've approached it seems totally fine, it's a matter of API. But you could also bind the postscript value, no?

I'm sure I've read somewhere that *bind* can cause problems - perhaps a little knowledge is a dangerous thing — Psionman, Apr 13 '22 at 11:54

Which is the best/most idiomatic way to communicate with components in Svelte?

1 Answers1