In this mini-tutorial we are going to see two different ways of communication between components in Svelte 3: a passed as and . callback prop event dispatcher Callback communication A method is the way you do communication between components in . A , and then, child invokes it. callback React parent component passes a callback method to a child Events based communication This one is a typical way you do communication in (although, it also allows you to use ). In this type of communication, a , and then someone (a ) will and do something once triggered. Vue.js callbacks as props component triggers some events on it's self parent component listen to it Svelte Svelte allows you to use both of them (as does). Vue Here we have a simple project. It consist of 3 components: (parent component), (events based communication) and (prop passing).  Under the project, there is a detailed explanation of both methods with small snippets, but I think it's better to see a complete project in order to understand better how it works. Guess a Number App SecretValue GuessComponent App.svelte Guess a Number < > script { onMount } ; SecretValue ; GuessComponents ; secret = ; showSecret = ; getRandomInt = {
		min = .ceil(min);
		max = .floor(max); .floor( .random() * (max - min + )) + min;
	} guessNumber = {
		showSecret = ;
		secret = getRandomInt( , ); .log(secret);
	} onGuess = { (value == secret){
			showSecret = ;
		}
	}

	onMount( {
		guessNumber();
	}); import from "svelte" import from "./SecretValue.svelte" import from "./GuessComponent.svelte" let null let false const ( ) => min, max Math Math return Math Math 1 const => () false 1 10 console const => value if true => () </ > script < > main < > h1 </ > h1 < = = = /> SecretValue showSecret {showSecret} secret {secret} on:restart {guessNumber} < = /> GuessComponents onGuess {onGuess} </ > main < > style { : center; : ; : ; : auto;
	} { : ; : uppercase; : ; : ;
	}

	@ (min-width: ) { { : none;
		}
	} main text-align padding 1em max-width 240px margin 0 h1 color #ff3e00 text-transform font-size 4em font-weight 100 media 640px main max-width </ > style SecretValue.svelte {showSecret ? secret : "???"} { #if showSecret } You won Play again { /if } < > script { createEventDispatcher } ; secret = ; showSecret = ; dispatch = createEventDispatcher(); playAgain = {
        dispatch( );
    } import from 'svelte' export let null export let false const const => () "restart" </ > script < > div < > p </ > p < > p </ > p < = > button on:click {playAgain} </ > button </ > div GuessComponent.svelte Guess < > script guessValue = ; onGuess = ; guess = {
        onGuess(guessValue);
    } let "" export let null const => e </ > script < > div < = /> input bind:value {guessValue} < = > button on:click {guess} </ > button </ > div Explanation: Event Dispatcher Let's take a look at . In order to trigger events we must create a dispatcher: SecretValue.svelte { createEventDispatcher } ; dispatch = createEventDispatcher(); import from 'svelte' const Now, you can use dispatch object to trigger events on the component: dispatch( ); "event_name" To listen to this event in parent component just add on child and pass a method as a parameter (see App.svelte). The data you want to trigger will be passed as a property of the event. on:event_name detail Complete snippet: Call callback  < > script Child ; sayHello = {
        alert( + e.detail);
    } import from "./Child.svelte" const ( ) => e "Hello " </ > script < = /> Child on:hello {sayHello}  < > script { createEventDispatcher } ; dispatch = createEventDispatcher(); triggerEvent = {
        dispatch( , );
    } import from 'svelte' const const => () "hello" "Rock" </ > script < = > button on:click {triggerEvent} </ > button Explanation: Callback The callback method is very simple: create a function on parent component and pass it to child: Call callback  < > script Child ; callback = {

    } import from "./Child.svelte" const ( ) => message </ > script < = /> Child callback {callback}  < > script callback; callCallback = {
        callback( );
    } export let const => () "test message" </ > script < = > button on:click {callback} </ > button Which is better? Personally, I prefer an communication, but I don't think it's actually better. The only problem with is that it can cause problems if badly managed, but normally, both of them are ok. In real life, I would opt for . event-based props storage You may also be interested in: Getting started with Svelte React Svelte Vue.js onMount

Different

Portfolio

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Svelte: Communication Between Components

Too Long; Didn't Read

Company Mentioned

Sasha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Svelte: Communication Between Components

Too Long; Didn't Read

Company Mentioned

Sasha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES