vueのslot(スロット)
4427 ワード
最近、いくつかのコンポーネントを書くのに忙しいので、スロットについて自分でslotとslot-scopeを使って、ドキュメントの更新を見て、「スロット」をもう一度勉強しました.次の段落はドキュメントの説明です.
2.6.0では、名前付きスロットと役割ドメインスロットに新しい統合構文(
スロット、つまりslot、slotはサブコンポーネントの中の1つのプレースホルダで、1つのslotの核心の問題、1つのslotの核心の問題、表示しないで、表示するならば、どのように展示して、これは親コンポーネントが制御したので、しかしスロットの表示の位置はサブコンポーネントが自分で決めたので、slotはコンポーネントtemplateのどんな位置に書いて、親コンポーネントから渡されたテンプレートがどこに表示されますか.
スロットの基本的な使い方(匿名スロット)
これはサブアセンブリです.デフォルトのスロット(匿名スロット)を使用すると、親コンポーネントの内容が表示される代わりに表示されます.
レンダリング後の結果
名前付きスロット
2.6.0から更新されました.
1つのコンポーネントに複数のスロットが必要な場合があります.複数のslotをどのように区別するか、slotの表示位置にも違いがあります.このような場合、要素にはnameという特殊な特性があります.この機能は、追加のスロットを定義するために使用できます.注意:nameを持たない出口には「default」という名前が隠されています.
次のコンポーネントのように、複数のスロットが必要です.コンポーネントにコンテンツをどのように提供しますか?
名前付きスロットにコンテンツを提供する場合は、1つの要素でv-slotコマンドを使用し、v-slotパラメータの形式で名前を指定できます.
レンダリング後の結果注意:
2.6.0では、名前付きスロットと役割ドメインスロットに新しい統合構文(
v-slot
命令)を導入しました.slot
とslot-scope
の2つの現在廃棄されているが除去されておらず、ドキュメントに残っている特性に取って代わります.新しい文法の由来はこのRFCを調べることができる.スロット、つまりslot、slotはサブコンポーネントの中の1つのプレースホルダで、1つのslotの核心の問題、1つのslotの核心の問題、表示しないで、表示するならば、どのように展示して、これは親コンポーネントが制御したので、しかしスロットの表示の位置はサブコンポーネントが自分で決めたので、slotはコンポーネントtemplateのどんな位置に書いて、親コンポーネントから渡されたテンプレートがどこに表示されますか.
スロットの基本的な使い方(匿名スロット)
これはサブアセンブリです.デフォルトのスロット(匿名スロット)を使用すると、親コンポーネントの内容が表示される代わりに表示されます.
export default {
name: 'children'
}
// children
slot
レンダリング後の結果
slot
名前付きスロット
2.6.0から更新されました.
slot
の特性を使用して廃棄された構文は、ここにある.1つのコンポーネントに複数のスロットが必要な場合があります.複数のslotをどのように区別するか、slotの表示位置にも違いがあります.このような場合、要素にはnameという特殊な特性があります.この機能は、追加のスロットを定義するために使用できます.
次のコンポーネントのように、複数のスロットが必要です.コンポーネントにコンテンツをどのように提供しますか?
名前付きスロットにコンテンツを提供する場合は、1つの要素でv-slotコマンドを使用し、v-slotパラメータの形式で名前を指定できます.
Here might be a page title
A paragraph for the main content.
And another one.
Here might be a page title
A paragraph for the main content.
And another one.
レンダリング後の結果
Here might be a page title
A paragraph for the main content.
And another one.
v-slot
は、1つの ( ), slot
にしか できません. : されるコンテンツがデフォルトスロットのみである 、コンポーネントのラベルはスロットのテンプレートとして できます.これにより、v-slotをコンポーネントに できます. アクティブドメインスロット
2.6.0から されました.slot-scope
の を して された は、ここにある.
スロットの には、サブコンポーネントにアクセスする があるものがある があります.サブコンポーネントのslotのように、 の ドメインをバインドして することができます.コンポーネントを すると、スロットの はslotから されたデータを することができ、 のスロットの は できます.
、バックアップコンテンツ(slotデフォルトコンテンツ)user. のuserをfirstNameに き えます.lastName
{{ user.lastName}}
にバインドされたプロパティをスロットpropと びます. ドメインでは、v-slotに を けて、 するスロットpropの を できます.// slot user
// slot ? ? slot , ,
slot , , , 。
{{ user.lastName }}
の ドメインでは、v-slotに を けて するスロットpropの を することができます.slotPropsは、slotPropsを して に することができます.useはサブコンポーネントslotから されたオブジェクトを に れた.
{{ slotProps.user.firstName }}
{{ slotProps.user.firstName }}
の 、 されるコンテンツがデフォルトのスロットのみである 、v-slotをコンポーネントに できます.
{{ slotProps.user.firstName }}
// default ,
{{ slotProps.user.firstName }}
{{ user.firstName }}
{{ person.firstName }}
:デフォルトのスロットの は、 ドメインが になるため、 きスロットと できません. のスロットが される は、すべてのスロットに なベース を してください.
バックアップ
バックアップコンテンツとは ですか.slotにはデフォルトのコンテンツがあり、スロットに のバックアップ(つまりデフォルト)コンテンツを するのに つ があります.コンテンツが されていないときにのみレンダリングされます.
まとめ
ここでは、いくつかのキーを に しただけで、 には や の がたくさんあります.ドキュメントを たり、 したりする があります.