Vue のスロットスコープの詳細な理解（初心者向け）

Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておらず、改めて学習している人の記事ばかりだと感じます。いずれも .Vue ファイルを使用しており、初心者には向かないと思うので、初心者向けの記事を書きます。

最初の投球ルーチン:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>スロットを通じてコンテンツを配信するコンポーネント</title>
    <script src="あなたの Vue アドレス、最新バージョンをダウンロードしてください"></script>
    <スクリプト>
        Vue.component("テストスロット",{
           // スロットはデフォルトのコンテンツ テンプレートを許可します:
               `<div>
                    エラー！
                    <スロット></スロット>
                </div>
               `、
            データ:関数() {
                戻る {
                    名前:"ペリー"
                }
            }
        });
    // 名前付きスロット Vue.component("slot-name",{
           テンプレート：
               `<div>
                      <ヘッダー>
                            <スロット名="ヘッダー"></スロット>
                      </ヘッダー>
                     <メイン>
                        <スロット ></スロット>
                     </メイン>
                     <フッター>
                        <スロット名="フッター"></スロット>
                     </フッター>
 
                </div>
               `
        });
        
    // スコープスロット Vue.component("todo-list",{
            継承属性:false、
            小道具:{
                todos:[配列、オブジェクト]
            },
            テンプレート：
            `<ul>
                <li v-for="todos 内の todo" :key="todo.id" style="display: block;" >
                    <スロット:data="todo">{{todo.text}}</スロット>
                </li>
             </ul>
            `
        });
                
    </スクリプト>
    
    <スタイル>
        li{
            リストスタイル: なし;
            表示: インラインブロック;
            フォントサイズ: 25px;
        }
    </スタイル>
</head>
<本文>
    <div id="アプリ">
        <!--1. スロット コンテンツ スロットは、コンポーネントを含むあらゆるコンテンツ、コードを受け取ることができます -->
        <test-slot>何か悪いことが起こりました。あなたは誰ですか? 知り合いですか?</test-slot>
        <テストスロット>
            何か悪いことが起こりました。
            <!-- 変数は許可されていますが、有効にするにはこのスコープ内にある必要があります。ここでは、name の値は "叉道口" になります -->
            <h3>タイトル {{name}}</h3>
            <img src="img/flower.jfif" alt="画像を表示できません">
        
        </テストスロット>
        <!--2. 名前付きスロット slo には特別な属性 name があり、これにより名前付きスロットを次のようになります-->
        <スロット名>
            <h3>学習を奨励する</h3>
            <p>若いときに努力しないと、年をとったときに後悔することになる</p>
            <p>時間は矢のように過ぎ去る</p>
            <テンプレートスロット="ヘッダー">
                <ul>
                    <li>ホーム</li>
                    <li>ようやく</li>
                    <li>人生について</li>
                    <li>将来について</li>
                </ul>
            </テンプレート>
            <p>こんにちは</p>
            <p スロット="フッター">
                <p>終了</p>
                <p>粤ICP備6545646456415</p>
            </p>
        </スロット名>
        
        <!-- slot-scope 経由で実装されたスコープ付きスロットを使用する -->
        <todo-list :todos="todos">
            <テンプレート スロット スコープ="slotProps">
                <span v-if="slotProps.data.isTrue">√</span>
                {{slotProps.data.text}}
            </テンプレート>
        </todo-list>
        
        <!--ES2015 構造構文を使用する-->
        <todo-list :todos="todos">
            <テンプレート スロット スコープ="{データ}">
                <span v-if="data.isTrue">√</span>
                {{データ.テキスト}}
            </テンプレート>
        </todo-list>        
    </div>
        
    <スクリプト>
        新しいVue({
            el:"#アプリ",
            データ：{
                名前:"クロスロード",
                すべて:
                    {テキスト:"A",id:1,isTrue:true},
                    {テキスト:"B",id:2,isTrue:true},
                    {テキスト:"C",id:3,isTrue:false},
                    {テキスト:"D",id:4,isTrue:true},
                ]、
                // スロットプロパティ: ""
            }
        })
        
    </スクリプト>
</本文>
</html>

この例では、通常のスロットと名前付きスロットについても説明していますが、ここでは説明しません。スコープ付きスロットについてのみ説明します。まず、「スコープスロット」という名前から始めましょう。本来、親コンポーネントテンプレートは子コンポーネントテンプレートのデータを使用できません。公式サイトでは、親コンポーネントテンプレートのすべてが親スコープでコンパイルされ、子コンポーネントテンプレートのすべてが子スコープでコンパイルされることが特に強調されています。この文は実際には理解するのがかなり難しいです。理解するために例を見てみましょう。

<テストスロット>

          何か悪いことが起こりました。

         <!-- 変数は許可されていますが、有効にするにはこのスコープ内にある必要があります。ここでは、name の値は "叉道口" になります -->

           <h3>タイトル {{name}}</h3>

           <img src="img/flower.jfif" alt="画像を表示できません">

</テストスロット>

これは上記の例ですが、ここでの名前は現在のコンポーネント内にある必要があり、テストスロットコンポーネント内のデータであってはなりません。これがスコープの制限です。名前データは親コンポーネントのスコープに属しているため、親コンポーネントのデータのみになります。しかし、スロットスコープの出現により、親コンポーネントは子コンポーネント内のデータを呼び出すことができ、子コンポーネントのデータはスロットスコープ属性を通じて親コンポーネントに渡される。

// スコープスロット Vue.component("todo-list",{
        継承属性:false、
        小道具:{
            todos:[配列、オブジェクト]
        },
        テンプレート：
        `<ul>
            <li v-for="todos 内の todo" :key="todo.id" style="display: block;" >
                  //ここで、data="todo" は、子コンポーネントの todo データが親コンポーネントに渡されることを意味します<slot :data="todo">{{todo.text}}</slot>//todo.text はデフォルト値であり、親コンポーネントによって上書きされます</li>
         </ul>
        `
    });

<!-- slot-scope 経由で実装されたスコープ付きスロットを使用する -->
<todo-list :todos="todos">
    <テンプレート スロット スコープ="slotProps">
        <span v-if="slotProps.data.isTrue">√</span>
        {{slotProps.data.text}}
    </テンプレート>
</todo-list>

使い方はこんな感じです。子コンポーネントから渡された、todo という値を持つ data というデータが slot-scope で受信されます。ここで slot-scope が受け取るオブジェクトは slotProps というオブジェクトで、渡したデータは slotProps のプロパティとして使用されるので、data を呼び出すには slotProps.data が必要であることに注意してください。前述のとおり、データの値は todo です。todo とは何でしょうか? Todo は todos からトラバースされるため、オブジェクトです。

新しいVue({
    el:"#アプリ",
    データ：{
        名前:"クロスロード",
        すべて:
            {テキスト:"A",id:1,isTrue:true},
            {テキスト:"B",id:2,isTrue:true},
            {テキスト:"C",id:3,isTrue:false},
            {テキスト:"D",id:4,isTrue:true},
        ]、
        // スロットプロパティ: ""
    }
});

スロットスコープ機能について理解できましたが、その適用シナリオは何でしょうか?誰かがカプセル化されたコンポーネントを作成したが、データの表示スタイルはユーザーが定義する必要があると考えていると想像できます。上記のように、リストのスタイルがユーザーによって定義されることを望みます。たとえば、√記号を追加しました。最初は初期データを渡しますが、そのデータはサブコンポーネントによって処理される必要があります。コンポーネントを書いた人は、処理されたデータを表示したいはずです。このとき、スロットスコープは非常に重要です。

要約する

これで、Vue の slot-scope の詳細な理解に関するこの記事は終了です。Vue slot-scope の理解に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: