スロットとスコープ付きスロット
スロットとスコープ付きスロットを使って柔軟なコンポーネントを構成します
「スロットとスコープ付きスロット」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
スロットとは
スロットを使うと、親コンポーネントから子コンポーネントのテンプレートにコンテンツを注入できます。
- Propsはデータを渡し、スロットはマークアップを渡します
- レイアウト用のラッパー、カード、モーダルに適しています
- コンテンツをどこに配置するかは子コンポーネントが決めます
デフォルトスロット
子コンポーネントはslot要素でプレースホルダーを定義します。親コンポーネントがタグの内側に記述した内容が、その場所に入ります。
<!-- Card.vue (child) -->
<template>
<div class="card">
<slot></slot>
</div>
</template>デフォルトスロットの使用
親コンポーネントは、コンポーネントのタグの間にコンテンツを渡します。
<!-- Parent -->
<Card>
<h2>Title</h2>
<p>Any content goes here.</p>
</Card>
<!-- It renders inside the card div -->スロットのフォールバックコンテンツ
スロットにはフォールバックコンテンツを用意できます。親コンポーネントから何も渡されなかった場合に表示されます。
<!-- Button.vue -->
<template>
<button>
<slot>Click me</slot>
</button>
</template>
<!-- <Button /> shows "Click me";
<Button>Save</Button> shows "Save" -->複数の名前付きスロット
名前付きスロットを使うと、コンポーネントに複数の挿入先を用意できます。
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</template>名前付きスロットへのコンテンツの挿入
親コンポーネントは、templateタグのv-slot:nameで名前付きスロットを指定します。
<Layout>
<template v-slot:header>
<h1>Site Title</h1>
</template>
<p>Main content (default slot)</p>
<template v-slot:footer>
<small>Copyright 2024</small>
</template>
</Layout>v-slotの短縮構文
v-slotには短縮構文があり、#記号を使用します。
<Layout>
<template #header>
<h1>Title</h1>
</template>
<template #footer>
<small>Footer</small>
</template>
</Layout>スコープ付きスロット
スコープ付きスロットを使うと、子コンポーネントからスロットコンテンツへデータを渡せます。
- 子コンポーネントはslot要素にデータをバインドします
- 親コンポーネントはslot propsとしてデータを受け取ります
- 子コンポーネントがデータを管理し、親コンポーネントが見た目を管理する場合に便利です
子コンポーネントからデータを公開する
子コンポーネントは、スロットに属性をバインドしてデータを共有します。
<!-- UserList.vue -->
<template>
<li v-for="user in users" :key="user.id">
<slot :user="user"></slot>
</li>
</template>スコープ付きスロットのデータを利用する
親コンポーネントはv-slotを通じてデータを受け取ります。
<UserList>
<template #default="slotProps">
{{ slotProps.user.name }}
</template>
</UserList>
<!-- or destructure: #default="{ user }" -->各スロットを使う場面
簡単な使い分け:
- デフォルトスロットは、単純なコンテンツの挿入に使用します
- 名前付きスロットは、複数の領域（レイアウト）に使用します
- スコープ付きスロットは、親コンポーネントが子コンポーネント内部のデータを必要とする場合に使用します
理解度チェック
スロットについての理解度を確認しましょう。
まとめ: スロット
スロットによるコンテンツの配布について学びました。
- デフォルトスロットは、親コンポーネントのマークアップを注入します
- 何も渡されなかった場合はフォールバックコンテンツが表示されます
- 名前付きスロット（v-slot:name、短縮構文の#）で領域を指定します
- スコープ付きスロットは、子コンポーネントのデータをスロットコンテンツへ渡します
次は、リアクティビティの基礎について学びます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「スロットとスコープ付きスロット」レッスンは無料ですか？
はい。「スロットとスコープ付きスロット」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「スロットとスコープ付きスロット」で何を学びますか？
スロットとスコープ付きスロットを使って柔軟なコンポーネントを構成します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「スロットとスコープ付きスロット」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- コンポーネントの作成と登録
- Propsとカスタムイベント
- スロットとスコープ付きスロット