コンポーネントのネスト¶
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>
適用イメージ