eastpoint

コンポーネントのネスト

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>

適用イメージ