名前付きスロットとデフォルトスロット
複数の 、 、省略記法#nameについて学習します。
「名前付きスロットとデフォルトスロット」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
スロットとは
スロットを使うと、親コンポーネントから子コンポーネントへマークアップを渡せます。子コンポーネントは<slot>要素を使って、そのコンテンツを表示する場所を決めます。これがVueのコンテンツ配信です。
デフォルトスロット
名前のない<slot>はデフォルトスロットです。親がコンポーネントタグの間に配置した内容は、そこに表示されます。
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>デフォルトスロットを使う
親では、コンポーネントタグの内側にコンテンツを入れるだけです。
<Card>
<p>This goes into the default slot</p>
</Card>名前付きスロットを使う理由
多くのコンポーネントには、ヘッダー、本文、フッターなど複数の挿入先があります。名前付きスロットを使うと、それぞれの領域に識別子を付け、親から個別に指定できます。
名前付きスロットを宣言する
各スロットにname属性を追加します。1つのコンポーネントで、名前付きスロットとデフォルト（名前なし）スロットを組み合わせることもできます。
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>v-slotで名前付きスロットに内容を渡す
親では、v-slot:nameディレクティブを指定した<template>でコンテンツを囲み、名前付きスロットを対象にします。
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>#のショートハンド
v-slot:にはショートハンドとして#があります。そのため、v-slot:headerは#headerと書けます。こちらが慣用的で簡潔な形式です。
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>タグ間のデフォルトコンテンツ
コンポーネントタグの間に直接配置したコンテンツ（名前付きのtemplate内ではないもの）は、デフォルトスロットに渡されます。#defaultを使って明示的に指定することもできます。
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>暗黙的指定と明示的指定の組み合わせ
同じ使用箇所で、デフォルトコンテンツをそのまま記述し、名前付きスロットをtemplateで指定できます。Vueは名前に基づいて、それぞれの内容を正しい場所へ振り分けます。
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>描画順序
親でのスロットの順序は関係ありません。最終的なレイアウトは子のtemplateが決めます。スロットのコンテンツは、子が対応する<slot>を配置した場所に必ず表示されます。
実用的なレイアウトコンポーネント
名前付きスロットを使うと、再利用可能なレイアウトの外枠を作れます。1つの<BaseLayout>で、header、sidebar、main contentのスロットを受け取り、さまざまなページを構成できます。
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>クイックチェック
v-slot:headerのショートハンドは何ですか。
振り返り
スロットを使って、親のマークアップを子に配信する方法を学びました。名前のない<slot>はデフォルトスロットで、nameを追加すると名前付きスロットになります。親は<template v-slot:name>または#nameのショートハンドで内容を渡し、最終的な配置は子のtemplateが決めます。
よくある質問
「名前付きスロットとデフォルトスロット」レッスンは無料ですか？
はい。「名前付きスロットとデフォルトスロット」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「名前付きスロットとデフォルトスロット」で何を学びますか？
複数の 、 、省略記法#nameについて学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「名前付きスロットとデフォルトスロット」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 名前付きスロットとデフォルトスロット
- スコープ付きスロット：親へのデータ受け渡し
- 動的なスロット名
- スロットのフォールバックコンテンツとスロットの確認