Svelteスロット

Svelteのスロットを操作して、一緒に構成できるコンポーネントを定義する方法

スロットは、一緒に構成できるコンポーネントを定義するための便利な方法です。

逆に、視点によっては、スロットはインポートするコンポーネントを構成するための便利な方法です。

仕組みは次のとおりです。

コンポーネントでは、を使用してスロットを定義できます。<slot />（または<slot></slot>）構文。

これがButton.svelte単に印刷するコンポーネント<button>HTMLタグ：

<button><slot /></button>

React開発者の場合、これは基本的にと同じです<button>{props.children}</button>

それをインポートするコンポーネントは、コンポーネントの開始タグと終了タグに追加することで、スロットに配置されるコンテンツを定義できます。

<script>
import Button from './Button.svelte'
</script>

<Button>Insert this into the slot</Button>

スロットが埋められていない場合に使用されるデフォルトを定義できます。

<button>
  <slot>
    Default text for the button
  </slot>
</button>

コンポーネントには複数のスロットを含めることができ、名前付きスロットを使用して互いに区別することができます。名前のない単一のスロットがデフォルトのスロットになります。

<slot name="before" />
<button>
  <slot />
</button>
<slot name="after" />

使用方法は次のとおりです。

<script>
import Button from './Button.svelte'
</script>

<Button>
Insert this into the slot
<p slot=“before”>Add this before</p>
<p slot=“after”>Add this after</p>
</Button>

そして、これはDOMに以下をレンダリングします：

<p slot="before">Add this before</p>
<button>
  Insert this into the slot
</button>
<p slot="after">Add this after</p>

私の無料ダウンロードSvelteハンドブック


より洗練されたチュートリアル：


Tech Wiki Online！