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"
    })
 </スクリプト>