←Back

When you want the parent component to respond to an interaction on the child component, use createEventDispatcher and dispatch on the child, and on the parent, use on:eventName={eventhandler};

Child component:

import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()

<h2>Child!</h2>
<button on:click={() => {
	dispatch('myEvent', {
		myName: 'Heropy!!'
		})
}}>
Child click!
</button>

Parent:

<Parent
	on:click={handler}
	on:myEvent={myEventHandler}
/>

(Svelte says it’s depreciated but works, and alternative is unclear)

Now, say you want a function to execute when a state variable changes, we can do this with Svelte Effect