SvelteのSlotについて、よく分からなかったので、図を交えて理解してみました。
親コンポーネントから、子コンポーネント呼び出しタグの中に要素を差し込むと、子コンポーネントのslotタグの位置に要素を表示させることができます。
デフォルトスロット
slotタグ内にデフォルトの要素を記載した場合、親コンポーネントからスロットに要素を渡さなかった場合、デフォルトの要素が表示されます。
//App.svelte
<script>
import Box from './Box.svelte';
</script>
<Box></Box>
//Box.svelte
<div>
<slot>
<p>デフォルトメッセージ</p>
</slot>
</div>
名前付きスロット
スロットに名前をつけて、親要素から差し込んだ要素の位置を制御することができます。
slot="差し込みたいスロットの名前"
<slot name="このスロットに付けたい名前">
slotの名前で制御しているため、順番は不同でも問題ありません。また、スロットの名前を指定していない要素は、全て名前の無いslotに集約されます。
よって下記のように親コンポーネントでのスロットへ差し込む要素の順は不同でも問題ありません。
親コンポーネントから特定のslotに対して要素の差し込みの有無で子コンポーネントを制御する。
子コンポーネント側で $$slots.＜slot名＞ で特定のslotに対し、親コンポーネントから差し込みがあったか否かで制御を行うことができます。。
実装イメージ
・親コンポーネントから子コンポーネントのclスロットに対し、差し込みがあれば背景色を赤にする。
・親コンポーネントから子コンポーネントのclスロットに対し、差し込みがあれば「コメントがありました。」と底部に表示させる。
//App.svelte
<script>
import Diary from './Diary.svelte'
</script>
<div style="display:flex">
<Diary title="今日の天気は？">
<div slot="cl">
<p>今日は晴れでした。</p>
</div>
</Diary>
<!-- このDiaryに対しclスロットに要素を差し込んでいるので、子コンポーネントで $$slots.cl は true となる。 -->
<Diary title="明日の天気は？"/>
<!--このDiaryに対しclスロットに要素を差し込んでいないので、子コンポーネントで $$slots.cl は false となる。 -->
</div>
//Diary.svelte
<script>
export let title;
</script>
<div class={ $$slots.cl ? "has-comment" : ""}
style="border:solid 1px black; width: 300px;">
<h2>{title}</h2>
<slot name="cl"></slot>
{#if $$slots.cl}
コメントがありました。
{/if}
</div>
<style>
.has-comment{
background-color: red;
}
</style>
親コンポーネントからの差し込み要素を子コンポーネント側から操作する。
下記のような実装があるとします。
//App.svelte
<script>
import Hoverable from './Hoverable.svelte';
</script>
{#each Array(3) as _}
<Hoverable>
<div>
<p>マウスが乗っていません。</p>
</div>
</Hoverable>
{/each}
<style>
.active {
background-color: #ff3e00;
color: white;
}
</style>
//Hoverable.svelte
<script>
let hovering;
function enter() {
hovering = true;
}
function leave() {
hovering = false;
}
</script>
<div on:mouseenter={enter} on:mouseleave={leave}>
<slot></slot>
</div>
下記のイメージのように、子コンポーネントにマウスが乗った場合に背景色と文字が変わる実装を追加します。
現時点では、子コンポネーントのslotにマウスが乗ると各子コンポーネント内のhoveringがtrueに変わりますが、親コンポーネントに伝わりません。
hoveringの値を、親コンポーネントとバインドして、マウスが乗っている場合にスロットに差し込んだ要素にactiveクラスをつけます。
<slot 親コンポーネントと共通の変数名={子コンポーネント側で使用する変数名}></slot>
<子コンポーネント名 let:親コンポーネントと共通の変数名={親コンポーネント側で使用する変数名}></slot>
親子で共通のisActiveから、それぞれで定義した変数名(親側active、子側hovering)で値を取り出すことが可能です。