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 インストールピットレコードを共有する

推薦する

Vue.jsで実装されたカレンダープラグインの使い方を詳しく説明します

本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグインさて、もう無駄...

SQLクエリの実行順序をゼロから学ぶ

SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...

Vueコンポーネントの再利用と拡張の詳細な説明

目次概要延長は必要ですか?スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...

Vue3 でモバイル ログインおよび登録モジュールをエレガントに実装する方法

目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...

WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...

HTML4.0 要素のデフォルトスタイルの配置

コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...

Navicat で MySQL データベースのパスワードを変更する複数の方法

方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...

Tomcat のメモリ構成の正しい姿勢についての簡単な説明

1. 背景多くのブログや記事を読みましたが、JVM のメモリ割り当て方法に関する包括的な記事は見つか...

MySQLの共通関数を使用してJSONを処理する方法

公式ドキュメント: JSON 関数名前説明JSON_APPEND() JSONドキュメントにデータを...

Linux で TCP 接続の最大数をテストする方法

序文TCP サーバの最大同時接続数に関して、「ポート番号の上限が 65535 であるため、TCP サ...

CocosCreatorで複数のタイマーを使用する方法の詳細な説明

1.タイムアウトを設定する3 秒後に abc を印刷します。一度だけ実行します。 setTimeou...

いくつかのMySQL更新操作のケース分析

目次ケーススタディアカウント残高を更新する直接更新楽観的ロック方式ロックフリーソリューションキューイ...

MySQL エラー 1290 (HY000) の解決方法

私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...

フラットスタイルを使用してウェブサイトをデザインする方法

フラットなウェブサイト構造の本質はシンプルさです。コンテンツの重要なポイントを強調し、ページの装飾効...