Vue のスロットの使用法と適用シナリオの詳細な分析

スロットとは何ですか?

Vue では、子コンポーネント タグの中央に何もラップできないことはわかっています。

しかし、コンポーネントを使用する場合、コンポーネントの外部のタグをカスタマイズしたいことがよくあります。Vue では、スコープ スロットと呼ばれるスロット メカニズムが追加されました。必要なバージョンは 2.1.0 以上です。

スロットは実際にはプレースホルダーです。これはコンポーネント内の HTML テンプレート内の場所を占め、何かを渡すことを可能にします。スロットは、匿名スロット、名前付きスロット、スコープ付きスロットに分けられます。

2.6.0 では、名前付きスロットとスコープ付きスロットの新しい統合構文 (v-slot ディレクティブ) が導入されました。スロットとスロットスコープを置き換えます

匿名スロット

匿名スロット。単一スロットまたはデフォルト スロットとも呼ばれます。名前付きスロットと比較すると、name 属性を設定する必要がなく、非表示の name 属性がデフォルトになります。

父親.vue

子.vue

匿名スロットの場合、name 属性は default に対応し、空白のままにしてデフォルト値を使用することもできます。

使用時に注意すべき別の問題があります。匿名スロットが 2 つ以上ある場合、子タグの内容は各スロットで置き換えられます。

名前付きスロット (vue2.6.0 以降では slot='name' は非推奨)

名前が示すように、スロットには名前が付けられます。定義: または、単純な略語を使用して #header を定義します。使用法: テンプレート タグで囲みます。

父親.vue

子.vue

ここでは、複数の名前付きスロットの使用について説明します。スロットの位置は、使用されているスロットの位置によって決まるのではなく、定義されるときの位置によって置き換えられます。

父親.vue

子.vue

スコープ付きスロット

データを転送するために使用されるスロットです。

スロットでデータを使用する場合は、スコープの問題に注意する必要があります。Vue の公式ドキュメントには、親テンプレートのすべてのコンテンツは親スコープでコンパイルされ、子テンプレートのすべてのコンテンツは子スコープでコンパイルされると記載されています。

子コンポーネントのデータを親のスロットコンテンツで利用できるようにするには、データを要素のプロパティとしてバインドします: v-bind:text="text"

知らせ：

匿名スコープスロットと名前付きスコープスロットの違いは、v-slot:defult="accepted name" (defult (anonymous は省略可能、named の反対は対応する名前を記述することです)) です。

v-solt は分解して受け取ることができます。分解によって受け取るフィールドは、渡されるフィールドと同じである必要があります。たとえば、1 は v-slot="{one}" に対応します。

レンダリング

要約する

これで、Vue のスロットの使用方法と適用シナリオに関するこの記事は終了です。Vue スロットの使用方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。