スロットは、親コンポーネントがテンプレートコンテンツを子コンポーネントに渡すことができます。これは、柔軟で再利用可能なラッパー（カード、モーダル、レイアウト）を構築する方法で、コンシューマーが内部マークアップを制御します。
<!-- Card.vue -->
<template>
<div class="card">
<slot></slot> <!-- parent's content is injected here -->
</div>
</template>
<!-- parent -->
<Card>
<h2>Title</h2> <!-- this markup fills the slot -->
<p>Any content!</p>
</Card>
子コンポーネントは「穴」（）を定義し、親はそれに任意のマークアップを埋めます。これはpropsを使用して文字列を渡すよりもはるかに柔軟です。
<slot><!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main> <!-- the default slot -->
<footer><slot name="footer"></slot></footer>
</template>
<!-- parent uses #name (shorthand for v-slot:name) -->
<Layout>
<template #header><h1>My App</h1></template>
<p>Main content (default slot)</p>
<template #footer><small>© 2024</small></template>
</Layout>
時には、子コンポーネントが親のスロットが必要とするデータを持っています（例えば、リスト内の各アイテム）。スコープ付きスロットは、子から親のテンプレートにデータを公開します：
<!-- List.vue — exposes each item to the slot -->
<template>
<li v-for="item in items" :key="item.id">
<slot :item="item" :index="index"></slot> <!-- pass data to the slot -->
</li>
</template>
<!-- parent receives the data via v-slot -->
<List :items="users">
<template #default="{ item }">
{{ item.name }} — {{ item.email }} <!-- parent decides how to render each item -->
</template>
</List>
スコープ付きスロットはレンダリングレス/ヘッドレスコンポーネントの鍵です：子はロジック（ループ、フェッチング、状態）を処理し、親がプレゼンテーションを完全に制御することができます。
スロットはVueのコンテンツ配信メカニズムであり、再利用可能なレイアウトおよびラッパーコンポーネントに必須です。
名前付きスロットは複数の挿入ポイントを提供し、スコープ付きスロット（子データを親が定義したテンプレートに公開）はヘッドレスコンポーネントやカスタマイズ可能なリスト/テーブルのような強力なパターンを有効にします。
これらはVueコンポーネントを硬い実装ではなく、構成可能にするものです。