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 での数値のフォーマットの詳細な説明

最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...

要素UIポップアップコンポーネントをカプセル化する手順

el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...

Kubernetesでポッドを作成する方法

目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...

MySQLの外部ネットワークアクセス権を開く方法

以下のように表示されます。主に認証コマンドを実行します: 2つの方法1. 任意のホストがユーザー b...

ウェブページのCSSの優先順位について詳しく説明します

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

Linux ファイアウォール設定の詳細な手順 (yum ウェアハウス設定に基づく)

序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...

Ubuntu 16.4 で完全に分散された Hadoop 環境を構築するための実践的なチュートリアル

序文この記事は主にubantu 16.4 Hadoop完全分散構築に関する関連コンテンツを紹介し、皆...

Docker を使用して pypi プライベート リポジトリを構築する方法

1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...

HTMLのテーブルタグの基本学習チュートリアル

表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...

MySQL の自動増分主キーが使い果たされた場合の対処方法

面接では、次のようなシナリオを経験する必要があります。インタビュアー: 「MySQL を使用したこと...

Nginx のタイムドログカットの詳細な説明

序文デフォルトでは、Nginx ログはファイルに書き込まれます。各ドメインのログを区別するために、通...

Linux でリモート サーバー ファイルの状態を表示する方法

以下のように表示されます。 test コマンドはファイルが存在するかどうかを判断します。 ssh u...

デザイン理論: コンテンツプレゼンテーションのための 10 のヒント

<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...

MySQL 接続制御プラグインの紹介

目次1. 接続制御プラグイン(connection_control)の紹介1.1 connectio...

MySQL インデックスの一般的な問題の概要

Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...