Vue3 スロットの使用状況の概要

//親コンポーネントコード <child-com> 
 <テンプレート v-slot:nameSlot> 
  スロットコンテンツ</template> 
</child-com> 
 
//コンポーネント テンプレート <slot name="nameSlot"></slot> 
v-slot の構文は slot と slot-scope スコープ スロットの機能を簡素化し、より強力で効率的なものにします。

//コンポーネント呼び出し <child-com> 
 <テンプレート v-スロット> 
  スロットコンテンツ</template> 
</child-com> 
 
//コンポーネント テンプレート <slot ></slot> 

//親コンポーネント <child-com> 
 <テンプレート v-slot:header> 
  ヘッダー</テンプレート> 
 <テンプレート v-slot:body> 
  コンテンツ</template> 
 <テンプレート v-slot:footer> 
  足 
</child-com> 
     
//サブコンポーネント <div> 
 <スロット名="ヘッダー"></スロット> 
 <スロット名="本文"></スロット> 
 <スロット名="フッター"></スロット> 
</div> 

<child-com> 
 <テンプレート #ヘッダー> 
  ヘッダー</テンプレート> 
 <テンプレート #本文> 
  コンテンツ</template> 
 <テンプレート #フッター> 
  足 
</child-com> 

// 
<child-com> 
 <テンプレート v-slot:header="slotProps"> 
  スロットコンテンツ --{{ slotProps.item }} シリアル番号 --{{ slotProps.index }} 
 </テンプレート> 
</child-com> 
     
//サブコンポーネントコード <テンプレート> 
 <div v-for="(item, index) in arr" :key="index"> 
  <スロット:item="アイテム" name="ヘッダー":index="インデックス"></スロット> 
 </div> 
</テンプレート> 
<スクリプトの設定> 
 定数arr = ['1111', '2222', '3333'] 
</スクリプト> 

<child-com> 
 <テンプレートvスロット:[dd()]> 
  動的スロット名</template> 
</child-com> 
 
<スクリプトの設定> 
定数dd = () => { 
  'hre'を返す 
}