あなたのコンポーネントを千変万化させ、Vue slotは微細に分析します.
(一)前言
Vueコードのslotとは何か、簡単に言えばスロットです.
上記の公式解釈を見てみると、同じようにslotが何を指しているのか分からないかもしれませんが、Vueでいつslotを使う必要があるのか見てみましょう.
例:コンポーネントのディスプレイレイヤは、一般的に構造が固定されている必要がありますが、その内部の部分的な構造は可変で、スタイル表現は固定されていません.たとえばButtonにiconが表示されているかどうか,あるいはModalボックスの中間コンテンツ表示領域の変化などは,サブアセンブリ自身で実現することは不可能である.コンポーネントは、HTML DOM構造の伝達を直接サポートするものではなく、この場合、
(二)v-slot用法
バージョン2.6.0では、Vueは、名前付きスロットと役割ドメインスロットの新しい統合構文(
使用方法は、デフォルトスロット、名前付きスロット、および役割ドメインスロットの3つに分類されます.
◎デフォルトスロット
サブアセンブリ作成:
親コンポーネント作成:v-slot付き
Vueコードのslotとは何か、簡単に言えばスロットです.
上記の公式解釈を見てみると、同じようにslotが何を指しているのか分からないかもしれませんが、Vueでいつslotを使う必要があるのか見てみましょう.
例:コンポーネントのディスプレイレイヤは、一般的に構造が固定されている必要がありますが、その内部の部分的な構造は可変で、スタイル表現は固定されていません.たとえばButtonにiconが表示されているかどうか,あるいはModalボックスの中間コンテンツ表示領域の変化などは,サブアセンブリ自身で実現することは不可能である.コンポーネントは、HTML DOM構造の伝達を直接サポートするものではなく、この場合、
slotをHTML構造の伝達入口として使用することで問題を解決することができる.(二)v-slot用法
バージョン2.6.0では、Vueは、名前付きスロットと役割ドメインスロットの新しい統合構文(
slotとslot-scopeの2つの現在廃棄されている、まだ除去されていない、ドキュメント内の特性に取って代わります.使用方法は、デフォルトスロット、名前付きスロット、および役割ドメインスロットの3つに分類されます.
◎デフォルトスロット
サブアセンブリ作成:
//
親コンポーネント作成:v-slot付き
。 ， //
，
，
slotProps ， slot
レンダリング
◎ スロット
サブアセンブリ : のスロットを する がある 、name を して、 なるスロットを します.nameを しない 、デフォルトはdefaultデフォルトスロットです. //
コンポーネント : ラベルにv-slot:xxxまたは#xxxのプロパティの を します.//
ツールバーの
（ #）
v-slot template
レンダリング
◎スコープスロット
サブコンポーネントの : コンポーネントがサブコンポーネントのデータにアクセスできるようにすると です.Functionを すこともできます. //
export default {
name: 'child',
data () {
return {
user: {
title: ' title',
name: ' name'
}
};
},
methods:{
testClick(){
// ，
alert('123');
}
}
};
コンポーネントの :バインドされた の オブジェクトで、 ではv-slot:xxx="slotProps"または#xxx="slotProps"に されます.xxxは きスロットのnameを し、slotPropsはサブコンポーネントが するデータオブジェクトで、 を できます.//
{{slotProps.user.title}}
{{user.title}}
prop
import Child from './component/child.vue';
export default {
name: 'demo',
components: {
Child
},
};
レンダリング
◎その の スロットpropは を できます.たとえば、v-slot="{ user: person }" はuserオブジェクトをpersonに を して します. スロットpropは、デフォルト を することができ、 えば、v-slot="{ user = { name: 'Guest' } }"は、 にカスタムバックアップコンテンツを する. ダイナミックスロットネーミング(v-slot:[dynamicSlotName]など)は、ネーミング をサポートします.
◎ v-slotは、templateの にしか できないか、デフォルトのスロットを している き です. コンポーネント の 、v-slotのnameを り し すると、 の のスロットコンテンツのみがロードされます. サブアセンブリがデフォルトスロットのみの 、 のデフォルトスロットの を できます. のスロットが される は、templateベースの を に する があります.
( )slot びslot-scopeの い
v-slotの な い を しましたが、ここでは のslotとslot-scopeの い と いを します.
◎サブアセンブリ
サブコンポーネントの き には いはありません. は です. //
export default {
name: 'child',
data () {
return {
user: {
title: ' title',
name: ' name'
}
};
}
};
◎ コンポーネント スロット:slot を し、サブアセンブリスロットのname に を えます. ドメインスロット:slot-scope によってサブコンポーネントから された セットを け れ、その の は します. //
2
{{slotProps.user.title}}
import Child from './component/child.vue';
export default {
name: 'demo',
components: {
Child
},
};
ファイナルレンダリング(Final Render)
◎ が がv-slotと なるのは、slotの を り し することができることである. slot は、サブアセンブリ に することができる. v3.0 はslot は できませんが、v-slot を することをお めします.
( ) スロットの スロットは、 またはfunctionの を することができ、サブコンポーネントに の 、 えば、 のエラーメッセージなどを き み、 コンポーネントに することができる.
を く
チーム(ZooTeam)、 くて と に んだ チームで、 に し、Baseは が かれている にある.チームには50 のフロントエンドのパートナーがいて、 は27 で、3 くがスタックエンジニアで、 な です.メンバー にはアリ、 からの「 」 もいれば、 、 、 などの の もいる.チームは の ドッキングのほか、 、 プラットフォーム、 プラットフォーム、 、クラウド 、データ と などの で と を い、 の を し、 し、 の しい を に している.
もしあなたがずっと り されていることを えたいなら、 り され めることを んでいます.もしあなたが えたいなら、ずっと くの えが だと められていますが、 することはできません.もしあなたがその を る があることを えたいなら、あなたを としません.もしあなたがやりたいことを えたいなら、チームが えなければなりませんが、あなたが を れて く はありません.もしあなたが のリズムを えたいならば、“5 の の3 の の ”です; の りを えたいならいいが、いつも のぼやけている... じる を じて、 な が なことを し げることができると じて、もっと い に うことができると じているなら.もしあなたが の に う に したいならば、 の で い 、 した 、 、 のあふれる チームの を したいならば、 たちは をするべきだと います.いつでも、 か いて、[email protected]に ってください.