Как создать собственное событие в Svelte?

Вы можете отправлять событие из дочернего компонента и обрабатывать его в родительском компоненте.

// children component
<script>
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();

    let count = 0;

    function handleClick() {
      count += 1;
      dispatch("customClick", {
        count
      });
    }
</script>

<button on:click = {handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

// parent component
<script>
  import ChildrenComponent from "./ChildrenComponent.svelte";

  let count;

  const handleCustomClick = event => {
    count = event.detail.count;
  };
</script>

<main>
    <p>Parent count: {count || 0}</p>
    <ChildrenComponent on:customClick = {handleCustomClick}/>
</main>

Ниже приведена демонстрационная версия codeandbox

Справка:

Учебники: события компонентов

Или вот так (без рассылки):

Родитель:

<script>
  import Child from "./Child.svelte";

  let count = 0;
  const handleClick = () => {
    count += 1;
  };
</script>

<main>
    <p>Parent count: {count}</p>
    <Child {count} on:click = {handleClick} />
</main>

Ребенок:

// child component
<script>
    export let count;
</script>

<button on:click>
  Clicked {count}
</button>