How to Create Custom events in Svelte.js
In this tutorial, we are going to learn about how to create and use custom events in svelte.
Custom events
Custom events help us to communicate to parent components from child components.
Creating a Custom event
Let’s create our first custom event by importing the createEventDispatcher from the ‘svelte’.
Name.svelte
<script>
import { createEventDispatcher } from "svelte";
export let name;
let dispatch = createEventDispatcher(); function myCustom() { dispatch("changename"); }</script>
<div>
<h1>{name}</h1>
<!-- dispatching the custom event `changename` --> <button on:click={myCustom}>Change Name</button></div>In the above component, we created our custom event called changename and dispatching the event by clicking a button.
Listening Custom event
To listen for the custom event we need to use on: directive.
App.svelte
<script>
import Name from "./Name.svelte"; let framework = "svelte";
function handleChange(){
framework = "react"
}
</script>
<div>
<!-- listening the custom event -->
<Name on:changename={handleChange} name={framework} /></div>How to pass arguments to custom events?
We can also pass arguments to the custom events and access it from the parent component.
Let’s add an argument to our changename custom event.
Name.svelte
<script>
import { createEventDispatcher } from "svelte";
export let name;
let dispatch = createEventDispatcher();
function myCustom() {
dispatch("changename", {
name: "Angular" //passing argument });
}
</script>
<div>
<h1>{name}</h1>
<button on:click={myCustom}>Change Name</button>
</div>To access the argument inside the parent component we need to use event object.
App.svelte
<script>
import Name from "./Name.svelte";
let framework = "svelte";
function handleChange(event) {
//accessing the argument framework = event.detail.name;
}
</script>
<div>
<!-- listening the custom event -->
<Name on:changename={handleChange} name={framework} />
</div>
- Share:
