useSlots() スロットの内容を取得する
最終更新：2026-10-22
useSlots() スロットの内容を取得する
useSlots() は親コンポーネントから渡されたスロット関数の集合を返します。「あるスロットが渡されているか」の判定や、スクリプトでの手動描画に使います。
| グループ | テンプレートとヘルパー |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const slots = useSlots()
if (slots.header) { /* 親が header スロットを提供している */ }戻り値：スロット関数のオブジェクト（default / 具名スロットを含む）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The first card shows the parent header; the second falls back to 'Default title'.💡 ポイント
💡 ヒント スロットの有無の判定が定番の用途です。あれば親の内容を、なければフォールバックを描けます。
ℹ️ 補足 テンプレートでは通常 を直接使います。スクリプト側で条件分岐したいときにこの関数を使います。
⚠️ 注意 リアクティブな算出でこれに依存しないでください。スロットの集合は描画の間に変わり得ます。
🏷️ 関連テンプレートとヘルパー
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q $slots との違いは？
A Composition API 版で機能は同じです。どちらもスロット関数の集合を返します。
Q スロット関数を呼び出せますか？
A 呼べます（slots.default()）。ただし通常は描画をテンプレートに任せ、手動呼び出しは上級者向けです。
Q 存在判定はどこでよく使われますか？
A カード、モーダル、テーブルなど「ヘッダーやフッターがあってもなくてもよい」コンポーネントのフォールバック UI です。
