JavaScript - Vue でのスロットの使用: スロット

JavaScript - Vue でのスロットの使用: スロット

Vue でのスロットの使用: slot

1. スロット タグ <slot></slot> は、子コンポーネントのテンプレート内で直接使用でき、親コンポーネントによって子コンポーネントに挿入されたコンテンツを表示できます。

2. スロットタグにいくつかのデフォルト値を書き込むことができます。親コンポーネントがコンテンツを挿入しない場合は、デフォルト値が表示されます。コンテンツを挿入する場合は、挿入されたコンテンツのみが表示されます。

3. 複数のスロット タグを使用し、複数のコンテンツを直接挿入する場合、各スロット タグには挿入されたすべてのコンテンツが含まれます。

スロット属性を使用して、挿入されたさまざまなコンテンツに指定された名前を設定し、対応するスロット タグに対応する名前属性値を設定して、スロット タグに指定された挿入されたコンテンツを表示させることができます。

1. スロットは一般的な用語です。テンプレート内の 3 つのスロット タグはすべてスロットです。

2. ただし、複数のスロットを区別する必要があり、それぞれに name 属性が設定されます。これは「名前付きスロット」と呼ばれ、name 属性を使用して名前を付ける必要があります。

3. 上記はスロットに挿入されたコンテンツであり、特定の名前のコンテンツをサブコンポーネントの対応する名前に挿入します。ここでは、スロット name="footer" に挿入されます。

4. 一般的に、スロットが 1 つしかない場合は、名前を付ける必要はありません。スロットが複数ある場合にのみ、それらを区別するために名前を付ける必要があります。

<div id="アプリ">
      <子供>
       <!-- <div slot="header">ヘッダー</div> -->
        <div slot="footer">フッ​​ター</div>
      </子>
    </div>
    <スクリプト>
   Vue.component('child',{
    //スロットを使用すると、サブコンポーネントに要素を渡すのが簡単になり、サブコンポーネントがスロットテンプレートのコンテンツを使用するのも非常に簡単になります:`<div>
                <スロット名='ヘッダー'>
                  <h6>ヘッダースロットの内容のデフォルト値は空です</h6>
                </スロット>
                <div class="content">本文</div>
                <スロット名='フッター'></スロット>
              </div>`
   })
    var vm = 新しい Vue({
        el: "#app",
    })
    </スクリプト>

スコープ付きスロット: テンプレートタグで囲む

1. <slot v-for='item of list' :item=item></slot> は、リストをループするかどうかのみを決定しますが、リスト内の各項目の表示方法は外部で決定されます。

2. そのため、子コンポーネントにスロットを渡す必要があります。まず、テンプレート[固定の書き込み方法]を最外層(これがスコープスロットです)に配置し、スロットスコープ属性(属性値はカスタマイズされます)を記述する必要があります。 (例: <template slot-scope='props'></template> は、サブコンポーネントがスロットを使用する場合、アイテム データをスロットに渡し、このデータはサブコンポーネントが上で使用されるときに使用できることを意味します。このデータは slot-scope 属性値に配置されます)

3. スコープ スロットを使用する必要がある状況: サブコンポーネントをループする必要がある場合、またはその一部を外部から渡す必要がある場合。

スコープ付きスロットを使用する場合、子コンポーネントは親コンポーネントのスロットにデータを渡すことができます。親コンポーネントによって渡されたスロットがこのデータを受け取る場合、外側のレイヤーでテンプレートを使用し、スロットスコープに対応する属性名を通じて渡されたデータを受信する必要があります。

<div id="アプリ">
        <子供>
          <!--
            親コンポーネントが子コンポーネントを呼び出すと、スコープ スロット テンプレートが子コンポーネントに挿入されます。
            スロットでは、子コンポーネントから受け取ったデータ項目を宣言し、それをスロットスコープのプロパティに配置し、H1テンプレートを通じて表示します -->
           <テンプレート スロット スコープ="props">
             <li>{{props.item}} -こんにちは</li>
           </テンプレート>
        </子>
    </div>
    <スクリプト>
    Vue.component('child', {
        データ:関数(){
          戻る {
            リスト:[1,2,3,4]
          }
        },
        //子コンポーネントがスロットを使用する場合、アイテムのデータをスロットに渡し、このデータを親コンポーネント テンプレートで使用します:`<div>
                    <ul>
                      <slot v-for="リストの項目" :item=項目>
                      </スロット>
                    </ul>
                  </div>`
                 
    })
    var vm = 新しい Vue({
        el: "#app"
    })
 </スクリプト>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueスロットの詳細な説明
  • Vueスロットの使用の詳細
  • Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明
  • VUE のコンパイル スコープとスロット スコープのスロットの問題について
  • Vue のスロットの使用法と適用シナリオの詳細な分析
  • Vue slot_特別な機能スロット、スロットスコープ、ディレクティブv-slotの説明
  • Vueスロットの簡単な理解と使用例の分析
  • Vue でスロットを使用する方法についての簡単な説明

<<:  VMware pro15 インストール macOS10.13 詳細インストール図(画像とテキスト)

>>:  MySql8.0.19 インストールピットレコードを共有する

推薦する

MySQL でパーセンテージと最初の数パーセントを表示する方法

目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...

MySQL の current_timestamp の落とし穴とその解決策を共有する

目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...

システム外のフォント参照とトランジション効果

コードをコピーコードは次のとおりです。 <span style="font-fami...

25 div+css プログラミングのヒントとコツ

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値...

meta name="" content="の機能の詳細な説明

1. 文法: <meta name="名前" content="...

MYSQL8.0.13 無料インストール版 設定チュートリアル例 詳細説明

1. ダウンロード、例として8.0を取り上げますダウンロードアドレス: https://dev.my...

JS でパブリッシュ サブスクライブ モデルを作成する

目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...

Vue の匿名スロットと名前付きスロットの詳細な説明

目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...

初心者向け入門チュートリアル④:サブディレクトリのバインド方法

これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...

MySQLグループクエリ最適化方法

MySQL はほとんどの場合、GROUP BY クエリと DISTINCT クエリを同様に処理します...

Docker クロスホストネットワーク (オーバーレイ) の実装

1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...

MySql インデックスの詳細な紹介と正しい使用方法

MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...

jQueryチェーン呼び出しの詳細な説明

目次チェーン呼び出し小さなケースチェーン呼び出しjQuery オブジェクトが任意のメソッド (ノード...

初めてDockerイメージを構築、実行、公開、取得するための詳細な手順

1. はじめに以前は、Python アプリケーションの作成を開始したい場合、最初のステップはマシンに...

js でシンプルなタブを実装する

タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...