コンポーネントのネスト

importにて別のsvelteファイルのコンポーネントを利用することが出来る。

コンポーネント間では、importしている側（親）からimportされる側（子供）にのみプロパティを渡すことが出来る。子供にて親から値を受け取るプロパティには"export"キーワードを付けてプロパティの宣言を行う必要がる。 （exportという表現がちょっと気持ち悪いけど・・・）

プロパティの受け渡しは、属性名に子供のプロパティ名を指定して渡すか（下記例では、子供"Chile1"のhelloプロパティに親のhelloプロパティ値を受け渡している。）、 map型でパッキングしてある場合には"{...obj}"の形式でパックしたまま渡すことができる。

<Child1 hello={hello}/>
<Child2 {...obj}/>

App.svelte

<script>
        import Child1 from './Child1.svelte';
        import Child2 from './Child2.svelte';
        let hello = 'Hello';

        const obj = {
                name: '織田信長',
                age: 50
        };
</script>

<div>
        <p>{hello} parent</p>
        <Child1 hello={hello}/>
        <Child2 {...obj}/>
</div>

Child1.svelte

<script>
        export let hello;
</script>

<p>{hello} child</p>

Child2.svelte

<script>
        export let name;
        export let age;
</script>

<p>{name}</p>
<p>{age}</p>

---

適用イメージ