Svelte: Custom Events

Using createEventDispatcher, you can create a custom event dispatcher to dispatch component events. The event dispatcher takes two arguments name (the event name) and detail which is the data you are sending back.

Basic Usage

import { createEventDispatcher } from "svelte";

// declare a event dispatcher
const dispatch = createEventDispatcher();

// dispatch an event
dispatch("event-name", eventData);

Example

File: counter.svelte

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();
  export let finalCount: number = 10;
  export let count: number = 0

  const increment = () => {
    count += 1;

    if( count === finalCount ) {
      // fire our event and send our data
      dispatch('message', {
        text: `Reached final count: ${finalCount}`
      });
    }
  }
</script>

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

File: App.svelte

on:message is our custom event. All data sent through by our custom event can be found in the property event.detail

<script lang="ts">
  import Counter from './Counter.svelte'

  let count = 0;
  function handleMessage(e: CustomEvent<{text: string}>) {
      alert(e.detail.text);
  }
</script>

<main>
  <p>Current counter: {count}</p>
  <Counter
    bind:count
    on:message={handleMessage}
    finalCount={15}/>
</main>