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>

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>

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>

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>

Comments

[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