[Svelte] 스벨트 커스텀 이벤트와 이벤트 데이터 추출하기

 

 

 

 

 

 

🌈 커스텀 이벤트 추가 및 이벤트 데이터 추출하기

Svelte.js - 완벽 가이드의 [섹션 6:: 컴포넌트에 대해 자세히 알아보기] 를 수강한 후에 정리한 내용이다.

 

 

 

 

👨‍💻 커스텀 이벤트와 데이터 추출

커스텀 이벤트에 있어 중요한 키워드는 dispatch이다.

 

하위 컴포넌트의 스크립트에서 createEventDispatcher를 통해

커스텀 이벤트의 이름과 전달할 데이터를 바인딩 한 메서드에 dispatch한다.

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

const dispatch = createEventDispatcher();

function addToCart(){
    dispatch('add-to-cart', {id: 'p1'}); //첫번째인수는 이벤트 이름, 두번쨰는 전달할 데이터
}
</script>

<button on:click="{addToCart}">Add to Cart</button>

 

하위 컴포넌트에서 dispatch한 커스텀 이벤트와 데이터를 상위 컴포넌트에서 사용할 수 있게 되었다.

<!-- App.svelte -->
<Product on:add-to-cart={() => alert(''Add to cart!)} />

 

또한 하위 컴포넌트에서 전달한 이벤트의 데이터를 추출하기 위해서는 아래와 같이 하위 컴포넌트의 프로퍼티에

메서드를 바인딩한 후 인자값을 받아와 사용할 수 있다.

<!-- App.svelte -->
<script>
function addToCart(event) {
    console.log(event.detail) // p1
}
</script>

<Product on:add-to-cart={addToCart} />