苗条：组件之间的通信

在本微型教程中，我们将看到Svelte 3中组件之间的两种不同通信方式：作为prop和event dispatcher传递的回调 。

回调通讯

回调方法是您在React中组件之间进行通信的方式。 父组件将回调方法传递给child ，然后child调用它。

基于事件的交流

这是您在Vue.js中进行通信的一种典型方式（尽管它也允许您将回调用作props ）。 在这种类型的通信中， 组件在其self上触发一些事件 ，然后有人（ 父组件 ）将监听它并在触发后执行某些操作。

斯维尔特

Svelte允许您同时使用它们（就像Vue一样）。

在这里，我们有一个简单的Guess a Number项目。 它包含3个组件： App （父组件）， SecretValue （基于事件的通信）和GuessComponent （传递属性 ）。 在该项目下，对这两种方法都进行了详细说明，并附带了一些小片段，但我认为最好查看一个完整的项目，以便更好地了解其工作原理。

瘦身

< script > 
	import { onMount } from "svelte" ;
	import SecretValue from "./SecretValue.svelte" ;
	import GuessComponents from "./GuessComponent.svelte" ;

	let secret = null ;
	let showSecret = false ;

	const getRandomInt = ( min, max ) => {
		min = Math .ceil(min);
		max = Math .floor(max);
		return Math .floor( Math .random() * (max - min + 1 )) + min;
	}

	const guessNumber = () => {
		showSecret = false ;
		secret = getRandomInt( 1 , 10 );
		console .log(secret);
	}

	const onGuess = value => {
		if (value == secret){
			showSecret = true ;
		}
	}

	onMount( () => {
		guessNumber();
	});

 </ script >

< main >
	< h1 > Guess a Number </ h1 >
	< SecretValue showSecret = {showSecret} secret = {secret} on:restart = {guessNumber} />
	< GuessComponents onGuess = {onGuess} />
</ main >

< style > 
	main {
		text-align : center;
		padding : 1em ;
		max-width : 240px ;
		margin : 0 auto;
	}

	h1 {
		color : #ff3e00 ;
		text-transform : uppercase;
		font-size : 4em ;
		font-weight : 100 ;
	}

	@ media (min-width: 640px ) {
		main {
			max-width : none;
		}
	}
 </ style >

SecretValue.svelte

< script > 
    import { createEventDispatcher } from 'svelte' ;

    export let secret = null ;
    export let showSecret = false ;

    const dispatch = createEventDispatcher();
    
    const playAgain = () => {
        dispatch( "restart" );
    }

 </ script >

< div >
    < p > {showSecret ? secret : "???"} </ p >
    { #if showSecret }
        < p > You won </ p >
        < button on:click = {playAgain} > Play again </ button >
    { /if }
</ div >

GuessComponent.svelte

< script > 
    let guessValue = "" ;
    export let onGuess = null ;

    const guess = e => {
        onGuess(guessValue);
    }
 </ script >

< div >
    < input bind:value = {guessValue} />
    < button on:click = {guess} > Guess </ button >
</ div >

说明：事件调度程序

让我们看一下SecretValue.svelte 。 为了触发事件，我们必须创建一个调度程序：

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

现在，您可以使用调度对象来触发组件上的事件：

dispatch( "event_name" );

要在父组件中侦听此事件，只需在子组件上添加on:event_name并将方法作为参数传递（请参阅App.svelte）。 您要触发的数据将作为事件的detail属性传递。

完整代码段：

<!-- Parent.svelte -->
< script > 
    import Child from "./Child.svelte" ;

    const sayHello = ( e ) => {
        alert( "Hello " + e.detail);
    }
 </ script >

< Child on:hello = {sayHello} />

<!-- Child.svelte -->
< script > 
    import { createEventDispatcher } from 'svelte' ;

    const dispatch = createEventDispatcher();
    
    const triggerEvent = () => {
        dispatch( "hello" , "Rock" );
    }
 </ script >

< button on:click = {triggerEvent} > Call callback </ button >

说明：回调

回调方法非常简单：在父组件上创建一个函数并将其传递给子组件：

<!-- Parent.svelte -->
< script > 
    import Child from "./Child.svelte" ;
    const callback = ( message ) => {

    }
 </ script >

< Child callback = {callback} />

<!-- Child.svelte -->
< script > 
    export let callback;

    const callCallback = () => {
        callback( "test message" );
    }
 </ script >

< button on:click = {callback} > Call callback </ button >

哪个更好？

就个人而言，我更喜欢基于事件的交流，但我认为这实际上并没有更好。 道具的唯一问题是，如果管理不善，可能会引起问题，但通常情况下，两者都可以。 在现实生活中，我会选择存储 。

您也可能对。。。有兴趣：

• Svelte入门
• 反应
• 斯维尔特
• Vue.js
• onMount

From: https://hackernoon.com/svelte-communication-between-components-193i32l5