이제 상위 컴포넌트인 App.svelte 컴포넌트로 이동합니다.
▲ 그림 4-17 App.svelte로 이동
그리고 App.svelte에서는 하위 컴포넌트를 임포트하고 컴포넌트 인스턴스를 생성하겠습니다. 생성과 동시에 name 프로퍼티에 같은 이름의 변수 name의 값을 주입하는 코드를 작성합니다.
REPL의 App.svelte
<script>
import Component from "./Component.svelte"; // 1. 하위 컴포넌트 임포트하기
let name = "world";
</script>
<input type=text bind:value={name}>
{#key name}
<Component name={name}/> <!-- 2. 컴포넌트 인스턴스 생성하기 -->
{/key}