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ハンドブック
より洗練されたチュートリアル:
- Svelte入門-短いチュートリアル
- Svelteで小道具を操作する方法
- Svelteにコンポーネントをインポートする方法
- Svelteコンポーネントから関数と変数をエクスポートする方法
- Svelteテンプレート:条件付きロジック
- Svelteコンポーネントをオンデマンドで再レンダリングする方法
- Svelteスロット
- Svelteテンプレートにコメントを追加する方法
- Svelteバインディング
- Svelteでの状態更新の処理
- Svelteのリアクティブステートメント
- Svelteライフサイクルイベント
- Svelteテンプレート:ループ
- SvelteテンプレートでPromiseを解決する
- Svelteでのイベントの操作
- Svelteのクロスコンポーネント状態管理
- スクリプトモジュールの外部でSapperのURLパラメータにアクセスする方法
- SvelteでCSSを動的に適用する方法
- SapperでURLにリダイレクトする方法
- Svelteテンプレートでforループをシミュレートする方法