動的なスロット名
v-slot:[dynamicName]、プログラムによるスロット選択、条件付きスロットレンダリングについて学習します。
「動的なスロット名」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
動的なスロット名を使う理由
実行時まで、どのスロットに内容を渡すか決まらない場合があります。prop、状態、ループ変数などによって決まる場合です。Vueでは角括弧構文を使ってスロット名を計算できます。
動的引数の構文
v-slot:の後ろの式を角括弧で囲みます。Vueはその式を評価して、対象となるスロット名を決定します。
<MyComponent>
<template v-slot:[dynamicName]>
Goes into whatever slot dynamicName equals
</template>
</MyComponent>角括弧を使ったショートハンド
#のショートハンドでも動的引数を使用できます。
<MyComponent>
<template #[dynamicName]>
Dynamic slot content
</template>
</MyComponent>状態から名前を決める
角括弧内の式では、任意のリアクティブな値を読み取れます。変数を切り替えると、コンテンツが渡されるスロットが変わります。
const dynamicName = ref("header");
// later: dynamicName.value = "footer";描画するコンテンツを切り替える
複数の名前付きスロットを定義した子と組み合わせると、動的な名前によって、状態に応じて異なる領域を1つのtemplateから表示できます。
<!-- child has slots: header, body, footer -->
<Panel>
<template #[activeSection]>
Active content here
</template>
</Panel>propから名前を選ぶ
コンポーネントのpropでスロットを決めることもできます。呼び出し側が領域を選べる、設定可能なラッパーを作る場合に便利です。
const props = defineProps({ target: String });
// use props.target inside #[props.target]動的なスロットを反復処理する
ループする項目からそれぞれの名前を計算することで、スロットをループ内で描画できます。テーブルの列やタブシステムに便利です。
<template
v-for="col in columns"
v-slot:[col.name]="{ row }"
>
{{ row[col.field] }}
</template>小文字と有効な名前
動的なスロット名は、有効な文字列に解決される必要があります。nullはデフォルトスロットとして扱われます。インラインtemplateを使う場合は、HTML属性名として無効なスペースや文字を避けてください。
const name = condition ? "primary" : null;
// null -> default slot条件によるスロット選択
角括弧内に三項演算子を記述すると、template内で条件に応じてスロットを選択できます。
<Alert>
<template #[isError ? 'error' : 'info']>
{{ message }}
</template>
</Alert>タブコンポーネントでの使用例
Tabsコンポーネントでは、選択されたタブのidからスロット名を計算することで、アクティブなタブのコンテンツを描画できます。これにより、親を宣言的に保てます。
<Tabs>
<template #[currentTab]>
{{ tabContent }}
</template>
</Tabs>読みやすさを保つ
動的なスロットは強力ですが、意図が分かりにくくなることがあります。スロットの集合が本当にデータによって決まる場合に使用し、固定された少数のスロットなら、通常の名前付きスロットのほうが読みやすくなります。
クイックチェック
実行時に計算される名前のスロットを選択する構文はどれですか。
まとめ
動的なスロット名では、ブラケット構文 v-slot:[expr] または #[expr] を使って、props や state からどのスロットに値を渡すかを計算できることを学びました。これにより、設定可能なラッパー、タブシステム、データ駆動型の列レンダリングを実現できます。
よくある質問
「動的なスロット名」レッスンは無料ですか？
はい。「動的なスロット名」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「動的なスロット名」で何を学びますか？
v-slot:[dynamicName]、プログラムによるスロット選択、条件付きスロットレンダリングについて学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「動的なスロット名」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。