[svelte 기초] 자식 컴포넌트에서 부모 컴포넌트로 이벤트 발생시키기 (= Vue.$emit)

데이터 전달(이벤트 발생) 방향

1. Child.svelte 컴포넌트에서 발생한 "Hello!" 문자열을 Parent.svelte 컴포넌트가 전달

2. Parent.svelte 컴포넌트에서 App.svelte 컴포넌트로 전달

 

                       "Hello!"                            "Hello!"

App.svelte     <---     Parent.svelte     <---    Child.svelte

 

* 샘플코드

<!-- ------------ -->
<!-- Child.svelte -->
<!-- ------------ -->
<script>
	import {createEventDispatcher} from 'svelte';
	const dispatch = createEventDispatcher();
	function sayHello(){
		// 상위 컴포넌트로 이벤트 전달
		var message = {
			text: "Hello!"
		}
		dispatch("message", message)
}
</script>
<button on:click={sayHello}> Say Hello </button>


<!-- ----------------- -->
<!-- Parent.svelte (1) --> 
<!-- ----------------- -->
<script>
import Child from './Child.svelte'
import {createEventDispatcher} from 'svelte';
const dispatch = createEventDispatcher();
function handleMessage(event){
	dispatch("message", {
		text: "Hello !"
	})
}
</script>
<Child on:message={handleMessage} />

<!-- ----------------- -->
<!-- Parent.svelte (2) --> 
<!-- ----------------- -->
<script>
import Child from './Child.svelte'
</script>
<Child on:message />


<!-- ---------- -->
<!-- App.svelte -->
<!-- ---------- -->
<script>
	import Parent from './Parent.svelte'
	let text = ""
	function handleMessage(event){
		text = event.detail.text
	}
</script>
<Parent on:message={handleMessage}/>
<h1>
	{text}
</h1>