<slot> スロットの出口

最終更新：2026-10-22

は子コンポーネントのテンプレート内の内容の出口を宣言します。親が渡した内容はここに置き換えられ、デフォルト（フォールバック）の内容も持たせられます。

📝 構文

<slot></slot>
<slot name="header">デフォルトのヘッダー</slot>

<!-- スコープ付きスロット：子のデータを外へ渡す -->
<slot :item="item"></slot>

props	name（具名スロット。デフォルトは default）。任意の属性をスコープデータとして外へ渡せます

以下のコードを編集して結果を確認しましょう：

出力：

Shows the parent's custom header and body content.

💡 ヒント デフォルトの内容は親が何も渡さなかったときだけ表示される、フォールバック UI の定番のやり方です。

ℹ️ 補足 スコープ付きスロットは子コンポーネントのデータを親へ逆向きに渡します（リストコンポーネントのカスタマイズの中核）。

⚠️ 注意 スロットの内容は親コンポーネントのスコープでコンパイルされます。子のデータには直接アクセスできず、スコープ付きスロットが必要です。

Q 親が内容を渡さないとどうなりますか？

A <slot> タグ内のデフォルトの内容が表示されます。それもなければ何も描画されません。

Q 1 つのコンポーネントにいくつスロットを持てますか？

A いくつでも持てます。デフォルト 1 つ + 複数の具名スロットです。

Q スロットの内容は子コンポーネントのデータにアクセスできますか？

A 直接はアクセスできません。スコープ付きスロットで slot 属性を通じてデータを渡してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。