Svelteでスロットを使用する方法

Svelteは、コンポーネントが相互に通信するためのさまざまな方法を提供します。これには、小道具、スロットなどが含まれます。Svelteアプリケーションで柔軟で再利用可能なコンポーネントを作成するには、スロットを統合する必要があります。

Svelteのスロットを理解する

Svelteフレームワークのスロットは、Vueのスロットと同様に機能します。これらは、親から子コンポーネントにコンテンツを渡す方法を提供します。スロットを使用すると、親コンポーネントからコンテンツを挿入できるコンポーネントのテンプレート内にプレースホルダーを定義できます。

このコンテンツは、プレーンテキスト、HTMLマークアップ、または他のSvelteコンポーネントにすることができます。スロットを使用すると、さまざまなユースケースに適応する、高度にカスタマイズ可能で動的なコンポーネントを作成できます。

基本的なスロットの作成

Svelteでスロットを作成するには、コンポーネントのテンプレート内でslot要素を使用します。slot要素は、親コンポーネントから渡すコンテンツのプレースホルダーです。デフォルトでは、スロットは渡されたコンテンツをレンダリングします。

基本的なスロットを作成する方法の例を次に示します。

<main>
これは子コンポーネントです
<slot></slot>
</main>

上記のコードブロックは、slot要素を使用して親コンポーネントからコンテンツを取得する子コンポーネントを表しています。

親コンポーネントから子コンポーネントにコンテンツを渡すには、まず子コンポーネントを親コンポーネントにインポートします。次に、自己終了タグを使用して子コンポーネントをレンダリングするのではなく、開始タグと終了タグを使用します。最後に、コンポーネントのタグ内に、親コンポーネントから子コンポーネントに渡したいコンテンツを記述します。

たとえば、次のようになります。

<script>
import Component from "./Component.svelte";
</script>

<main>
これは親コンポーネントです
<Component>
<span>これは親コンポーネントからのメッセージです</span>
</Component>
</main>

親コンポーネントから子コンポーネントにコンテンツを渡すことに加えて、スロットでフォールバック/デフォルトのコンテンツを提供できます。このコンテンツは、親コンポーネントがコンテンツを渡さない場合にスロットが表示するものです。

フォールバックコンテンツを渡す方法は次のとおりです。

<main>
これは子コンポーネントです
<slot>フォールバックコンテンツ</slot>
</main>

このコードブロックは、親コンポーネントがコンテンツを提供しない場合にスロットが表示するフォールバックコンテンツとしてテキスト「フォールバックコンテンツ」を提供します。

スロットプロパティを使用してスロット間でデータを渡す

Svelteを使用すると、スロットプロパティを使用してスロットにデータを渡すことができます。スロットプロパティは、子コンポーネントからスロットに挿入しているコンテンツにデータを渡したい場合に使用します。

たとえば、次のようになります。

<script>
let message = 'Hello Parent Component!'
</script>

<main>
これは子コンポーネントです
<slot message={message}></slot>
</main>

上記のコードブロックは、Svelteコンポーネントを表しています。scriptタグ内で、変数messageを宣言し、テキスト「Hello Parent Component!」を代入します。また、メッセージ変数をスロットプロパティmessageに渡します。これにより、親コンポーネントがこのスロットにコンテンツを挿入するときに、メッセージデータを使用できるようになります。

<script>
import Component from "./Component.svelte";
</script>

<main>
これは親コンポーネントです
<Component let:message>
<div>
子コンポーネントは{message}と言っています
</div>
</Component>
</main>

let:message構文により、親コンポーネントは子コンポーネントが提供するmessageスロットプロパティにアクセスできます。divタグのmessage変数は、messageスロットプロパティのデータです。

単一のスロットプロパティに限定されているわけではないことに注意してください。必要に応じて複数のスロットプロパティを渡すことができます。

<script>
let user = {
firstName: 'John',
lastName: 'Doe'
};
</script>

<main>
これは子コンポーネントです
<slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>

親コンポーネントで:

<script>
import Component from "./Component.svelte";
</script>

<main>
これは親コンポーネントです
<Component let:firstName let:lastName>
<div>
ユーザー名は{firstName} {lastName}です
</div>
</Component>
</main>

名前付きスロットを使用する

コンポーネントに複数のスロットを渡したい場合は、名前付きスロットを使用できます。名前付きスロットを使用すると、各スロットに一意の名前を付けることができるため、さまざまなスロットを管理しやすくなります。名前付きスロットを使用すると、さまざまなレイアウトを持つ複雑なコンポーネントを構築できます。

名前付きスロットを作成するには、nameプロパティをslot要素に渡します。

<div>
これは子コンポーネントです

<p>ヘッダー: <slot name='header'></slot></p>
<p>フッター: <slot name='footer'></slot></p>
</div>

この例では、headerという名前のスロットとfooterという名前のスロットの2つの名前付きスロットがあります。slotプロパティを使用すると、親コンポーネントから各スロットにコンテンツを渡すことができます。

たとえば:

<script>
import Component from "./Component.svelte";
</script>

<main>
これは親コンポーネントです
<Component>
<span slot="header">これはヘッダーに渡されます</span>
<span slot="footer">これはフッターに渡されます</span>
</Component>
</main>

このコードは、slotプロパティを使用して名前付きスロットにコンテンツを渡す方法を示しています。最初のspanタグでは、slotプロパティに値headerを渡します。これにより、spanタグ内のテキストがheaderスロットにレンダリングされます。同様に、slotプロパティの値がfooterであるspanタグ内のテキストは、footerスロットにレンダリングされます。

スロット転送を理解する

スロット転送は、親コンポーネントからラッパコンポーネントを介して子コンポーネントにコンテンツを渡すことができるSvelteの機能です。これは、関連のないコンポーネントからコンテンツを渡したい場合に非常に便利です。

スロット転送を使用する方法の例を次に示します。最初に、子コンポーネントを作成します。

<main>
これは子コンポーネントです
<slot name="message"></slot>
</main>

次に、ラッパコンポーネントを作成します。

<script>
import Component from "./Component.svelte";
</script>

<main>
<Component>
<div slot='message'>
<slot name="wrapperMessage"></slot>
</div>
</Component>
</main>

このコードブロックでは、別の名前付きスロットを子コンポーネントのmessageスロットに渡しています。

次に、親コンポーネントにこのコードを記述します。

<script>
import Wrapper from "./Wrapper.svelte";
</script>

<main>
これは親コンポーネントです
<Wrapper>
<div slot="wrapperMessage">
これは親コンポーネントからのものです
</div>
</Wrapper>
</main>

上記の構造では、「これは親コンポーネントからのものです」というコンテンツが、ラッパコンポーネント内のwrapperMessageスロットのおかげで、ラッパコンポーネントを介して直接子コンポーネントに渡されます。

Svelteスロットで生活を楽にする

スロットは、高度にカスタマイズ可能で再利用可能なコンポーネントを作成できるSvelteの強力な機能です。基本的なスロット、名前付きスロット、スロットプロパティの使い方などを学習しました。さまざまな種類のスロットとその使用方法を理解することで、動的で柔軟なユーザーインターフェイスを構築できます。

パソコンの友達