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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+tsx のスロット使用の問題が置き換えられない
  • VUE のコンパイル スコープとスロット スコープのスロットの問題について
  • Vue のスロットの使用法と適用シナリオの詳細な分析
  • ant design vue table a-tableの二次カプセル化とスロットレンダリングの問題を解決する
  • Vue slot_特別な機能スロット、スロットスコープ、ディレクティブv-slotの説明
  • Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明

<<:  MySQL でのテーブルの作成と削除の詳細な例

>>:  Docker デプロイメントサービスの落とし穴を登る過程の詳細

推薦する

MySQLデータベースのトランザクションとインデックスの詳細な説明

目次1. 事務:取引の 4 つの主な特徴:同時トランザクションはどのような問題を引き起こしますか? ...

MySQL ステートメントにおける IN と Exists の比較分析

背景最近、SQL 文を書くときに、IN と Exists のどちらを選択するか迷ったので、両方の方法...

ドロップダウンメニューを実現するためのHTML+CSS

1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...

MySQL 5.7.18 バージョンの無料インストール構成チュートリアル

MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...

Linuxのseqコマンドを使用して数字のシーケンスを生成します(推奨)

Linux の seq コマンドは、数字のリストを非常に高速に生成でき、使いやすく柔軟性に優れてい...

XHTML と CSS の Web ページ作成の問題に対する解決策

XHTML CSS ページ制作中に遭遇する問題の解決策は、解決策と呼ぶには少々大げさです。せいぜい、...

MySQLクエリ最適化プロセスを理解する

目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...

ウェブサイトのコンテンツの100~1%はナビゲーションである

ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...

Alibaba Cloud OSS によってアップロードされた Nginx プロキシ転送実装コード

序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...

Vueトップタグ閲覧履歴の実装

目次ナンセンス実装された機能文章要点ナンセンスデモプレビュー実装された機能デフォルトでホームページが...

Vueはプライベートフィルターと基本的な使用法を定義します

プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルタ...

7つのMySQL JOINタイプのまとめ

始める前に、これから紹介する JOIN タイプを示すために 2 つのテーブルを作成します。テーブルを...

Linux netfilter/iptables の知識ポイントの詳細な説明

ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...

6つのレイアウトでのFrameLayoutの使用

序文前回はLinearLayoutについて説明しました。今回はFrameLayoutの使い方を説明し...