Vue Academy · レッスン

スコープ付きスロット：親へのデータ受け渡し

slot :data='value'、親側でのv-slot='{ data }'、レンダープロップパターンについて学習します。

レッスン 2/413 ステップ

「スコープ付きスロット：親へのデータ受け渡し」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

通常のスロットの制限

通常のスロットでは親から子へマークアップを渡せますが、親から子の内部データにアクセスすることはできません。スコープ付きスロットを使うと、子からスロットのコンテンツへデータを公開できるため、この問題を解決できます。

スロットにデータをバインドする

子では<slot>要素に属性をバインドします。これをスロットプロパティと呼びます。バインドした値は、親が描画するコンテンツに渡されます。

<!-- List.vue -->
<ul>
  <li v-for="(item, i) in items" :key="item.id">
    <slot :item="item" :index="i"></slot>
  </li>
</ul>

スロットプロパティを受け取る

親では、v-slotの値が、子がバインドしたすべてのスロットプロパティを含むオブジェクトになります。

<List :items="users">
  <template v-slot:default="slotProps">
    {{ slotProps.index }}: {{ slotProps.item.name }}
  </template>
</List>

スロットプロパティを分割代入する

スロットの値は単なるオブジェクトなので、インラインで分割代入してコードをすっきりさせられます。

<List :items="users">
  <template v-slot:default="{ item, index }">
    {{ index }}: {{ item.name }}
  </template>
</List>

デフォルトスコープ付きスロットのショートハンド

デフォルトスロットだけを使う場合は、ネストしたtemplateではなく、コンポーネントタグに直接v-slotを指定できます。

<List :items="users" v-slot="{ item }">
  {{ item.name }}
</List>

名前の変更とデフォルト値

分割代入では、通常のJavaScriptと同じように、名前の変更とデフォルト値の指定ができます。

<template v-slot:default="{ item: user, index = 0 }">
  {{ index }} - {{ user.name }}
</template>

名前付きスコープ付きスロット

名前付きスロットもスコープ付きにできます。名前と分割代入したプロパティを組み合わせて使用します。

<DataTable :rows="rows">
  <template #cell="{ value, column }">
    <strong>{{ column }}: {{ value }}</strong>
  </template>
</DataTable>

描画なしコンポーネント

スコープ付きスロットを使うと、描画なしコンポーネントパターンを実現できます。コンポーネントはロジックと状態を処理しますが、自身のマークアップは描画せず、スコープ付きスロットを通じてデータを公開し、UIの決定を親に任せます。

描画なしマウストラッカー

このコンポーネントはカーソルを追跡し、座標を公開します。デフォルトスロットだけを描画し、xとyを渡します。

<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>

描画なしコンポーネントを利用する

親はすべての表示を用意し、公開されたデータを読み取ります。これにより、ロジックとプレゼンテーションが完全に分離されます。

<Mouse v-slot="{ x, y }">
  <p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>

スコープ付きスロットとComposable

Vue 3では、純粋なロジックの再利用に描画なしコンポーネントの代わりにComposableを使うことがよくあります。ただし、親が各項目をカスタマイズしながら、子が反復処理や構造（リストやテーブルなど）を制御する必要がある場合は、スコープ付きスロットが適しています。

クイックチェック

親は、スコープ付きスロットが公開したデータをどのように受け取りますか。

対話的なレッスンで答える

振り返り

スコープ付きスロットでは、子が<slot>にプロパティをバインドして、親へデータを公開できることを学びました。親はv-slotの値（多くの場合は分割代入します）を通じてそのデータを読み取り、ロジックとプレゼンテーションを分離した描画なしコンポーネントを実現できます。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「スコープ付きスロット：親へのデータ受け渡し」レッスンは無料ですか？

はい。「スコープ付きスロット：親へのデータ受け渡し」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「スコープ付きスロット：親へのデータ受け渡し」で何を学びますか？

slot :data='value'、親側でのv-slot='{ data }'、レンダープロップパターンについて学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「スコープ付きスロット：親へのデータ受け渡し」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る