Vue でのスロット配置と使用状況分析

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DELL G3 コンピュータ。

Vue には主に 3 種類のスロットがあります。

デフォルトスロット、名前付きスロット、スコープ付きスロット

Vue のスロットは、親コンポーネントに提供される子コンポーネントのプレースホルダーを指します。
タグで示されるように、親コンポーネントは HTML、コンポーネントなどの任意のテンプレート コードをこのプレースホルダーに入力することができ、入力されたコンテンツは子コンポーネントのタグを置き換えます (プレースホルダーを置き換えます)。

デフォルトスロット

デフォルト スロットは最も単純なタイプのスロットです。これは、プレースホルダーを置き換えることで親コンポーネント内の子コンポーネントの内容を変更するという上記の説明と一致しています。

文法：

子コンポーネントにプレースホルダーを配置します。

<テンプレート>
    <span>
        <span>サーシャが体重を減らす</span>
        <スロット></スロット>
    </span>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前: 'chassList'
}
</スクリプト>

次に、親コンポーネントでこの子コンポーネントを参照し、プレースホルダーにコンテンツを入力します。

<テンプレート>
    <div>
        <span>今日何を食べるか:</span>
        <シャーシリスト>
            <span>義姉がサーシャに食事を与えてくれない</span>
        </シャーシリスト>
    </div>
</テンプレート>

このとき、ページに表示される内容は「今日何を食べるか：サーシャはダイエット中だが、義理の妹は彼女に食べさせてくれない」となります。

名前付きスロット

たとえば、子コンポーネントにはプレースホルダーを置き換える必要がある場所が 2 つ (2 つのスロット) あります。このとき、親コンポーネントが対応するコンテンツを対応するスロットに埋め込む場合、デフォルトのスロットでは、対応するコンテンツをどのスロットに埋め込むべきかを判断できません。このようなシナリオに対処するために、名前付きスロットが誕生しました。

名前付きスロットは、実際には子コンポーネントのスロットに名前を付けるためのもので、親コンポーネントは子コンポーネントを参照するときに名前に従ってスロットを一致させ、対応するスロットに対応するコンテンツを埋め込むことができます。

文法：

子コンポーネントに 2 つの名前付きスロットを配置します。

<テンプレート>
    <div>
        <span>最初のスロット</span>
        <スロット名="1"></スロット>
        <span>2 番目のスロット</span>
        <スロット名="2"></スロット>
    </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前: 'chassList'
}
</スクリプト>

親コンポーネント内の子コンポーネントを参照し、v-slot:[name] を通じて対応するスロットに対応するコンテンツを入力します。

<テンプレート>
    <div>
        <span>2 つのスロット:</span>
        <シャーシリスト>
            <テンプレート v-slot:one>
                1つ、
            </テンプレート>
            <テンプレート v-slot:two>
                <span>2</span>
            </テンプレート>
        </シャーシリスト>
    </div>
</テンプレート>

このとき、ページに表示される内容は[2つのスロット：最初のスロットが1、2番目のスロットが2]になります。

デフォルトスロットと名前付きスロットの使用に関する注意事項

1. 子コンポーネントに複数のデフォルト スロットがある場合、親コンポーネントのデフォルト スロットに割り当てられたすべての入力内容 (未指定の名前付きスロット) が、子コンポーネントの各デフォルト スロットに入力されます。

2. 親コンポーネントで名前付きスロットの充填順序が乱れた場合でも、名前付きスロットの名前が一致していれば、充填されたコンテンツは対応する名前付きスロットに正しくレンダリングされ、1 つのピットに 1 つのニンジンが与えられます。

3. 子コンポーネントにデフォルト スロットと名前付きスロットの両方が存在するが、親コンポーネントで指定された名前付きスロットが子コンポーネントで見つからない場合、コンテンツはデフォルト スロットに入力されるのではなく、直接破棄されます。

スコープ付きスロット

前述のデフォルト スロットや名前付きスロットと比較すると、スコープ スロットは理解し、使用するのが難しくなります。

• 最初の 2 つのスロットはフィラーの位置を強調します。
• スコープ スロットは、データ アクションの [スコープ] を強調します。
• スコープ付きスロットは、パラメータ (データ) を持つスロットです。

親コンポーネントが使用できるように、パラメータ (データ) を子コンポーネントのスロットに取り込みます。パラメータ (データ) はスロット内でのみ有効です。親コンポーネントは、子コンポーネントから渡されたスロット パラメータ (データ) に基づいて、表示されるコンテンツをカスタマイズできます。

文法：

子コンポーネントにパラメータ (データ) を含むスロットを配置します。

<テンプレート>
    <div>
        <span>スロット内のパラメータ値は</span>
        <スロット :isAllwo="isAllwo"></スロット>
    </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前: 'classList',
    データ（） {
        戻る {
            isAllwo: {
                1: '1'、
                2: 「2」
            }　
         }
    }
}
</スクリプト>

親コンポーネント内で子コンポーネントを参照し、 slot-scope を使用して子コンポーネントのスロットから渡されたパラメータを受け入れ、データを使用します。

<テンプレート>
    <div>
        <span>スコープ付きスロット:</span>
        <クラスリスト>
            <テンプレート スロット スコープ="isAllwo">
                {{isAllwo.isAllwo.one}}
            </テンプレート>
        </クラスリスト>
    </div>
</テンプレート>

このとき、ページに表示される内容は「スコープスロット：スロット内のパラメータ値は1つ」となります。

テンプレート内の {{}} は式をサポートしているため、サブコンポーネントから渡されるさまざまなパラメータ値を使用してページ コンテンツをカスタマイズできます。

<テンプレート>
    <div>
        <span>スコープ付きスロット:</span>
        <クラスリスト>
            <テンプレート スロット スコープ="isAllwo">
                {{ isAllwo.isAllwo.one|| '空の値' }}
            </テンプレート>
        </クラスリスト>
    </div>
</テンプレート>

この時、子コンポーネントから渡されたパラメータが null 値の場合、ページの表示内容は [スコープ スロット: スロット内のパラメータ値が null です] となります。

スコープ付きスロットにはさまざまな使用シナリオがあり、さまざまなフレームワークで広く使用されています。たとえば、ElementUI のテーブル内の行または列の表示内容をカスタマイズすることは、スコープ付きスロットの典型的な適用シナリオです。

これで、vue のスロットの構成と使用状況の分析に関するこの記事は終了です。vue のさまざまなタイプのスロットの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。