컴포넌트 불러오기 및 props로 컴포넌트에 값 전달하기

컴포넌트 불러오기

스벨트는 다음과 같이 컴포넌트를 불러올 수 있습니다.

 

<script>
 import Header from './Header.svelte';
</script>

<Header />

 

script 영역에서 import를 해오고, 

script 영역 바로 아래에 해당 컴포넌트를 명시해주면 됩니다.

 

주의해야할 점은 불러오는 컴포넌트의 맨 앞글자는 대문자를 사용해주셔야합니다.

 

props로 값 전달하기

 

<script>
 import Header from './header.svelte';
 
 let count = 0;
</script>

<Header{count}/>

 

위의 코드처럼 {} 중괄호에 보내주고싶은 값을 명시해주면 됩니다.

그러면 props를 받을 땐 어떻게 해줘야 할까요?

 

props로 값 전달 받기

 

<script>
 export let count;
</script>

 

받아오는 컴포넌트쪽에서 export를 작성하고 받아오려는 값의 명칭을 적어주시면 됩니다.