DEV Community

Cover image for How to send events from a child to parent in Svelte
Johnny Simpson
Johnny Simpson

Posted on • Originally published at fjolt.com

How to send events from a child to parent in Svelte

Svelte events are the way we add interactivity to components in Svelte. A common issue with Svelte events is adding arguments to functions called within them. For example, suppose we have a basic counter, which increases any time the user clicks on it:

<script>
    // we write export let to say that this is a property
    // that means we can change it later!
    let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click={addToCounter}>{x}</button>
Enter fullscreen mode Exit fullscreen mode

This works fine, but let's say we want to change it so that we increase the counter by a certain amount whenever it is clicked. We might try changing the code to something like this:

<script>
    // we write export let to say that this is a property
    // that means we can change it later!
    let x = 0;
    const addToCounter = function(amount) {
        x += amount;
    }
</script>

<button id="counter" on:click={addToCounter(5)}>{x}</button>
Enter fullscreen mode Exit fullscreen mode

But this WONT work - instead we need to change our event to contain a function instead. To add arguments to our addToCounter function, we have to do something like this instead:

<button id="counter" on:click={() => addToCounter(5)}>{x}</button>
Enter fullscreen mode Exit fullscreen mode

Here, we call a function, which returns the value produced by addToCounter. This also works for events, so if you want to pass the event or e object to your function, you could do something like this:

<button id="counter" on:click={(e) => addToCounter(e)}>{x}</button>
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

Collapse
davidjm profile image
David

Hi just getting started with svelte (and javascript).
I'm building an art gallery app. All the art works are in paintings.json,
In the Header component I have several buttons ( with on:click events) to select a medium (water color, oils etc.) and I want to pass the medium clicked to App.svelte so I can filter the paintings.json file. What would be the best way to do this?
Any help - including code snippets - much appreciated