Vue3 插槽使用汇总

//父组件代码 
<child-com> 
 <template v-slot:nameSlot> 
  插槽内容 
 </template> 
</child-com> 
 
//组件模板 
<slot name="nameSlot"></slot> 
v-slot 的语法，简化 slot、slot-scope 作用域插槽的功能，相比更加强大，代码效率更高。

//组件调用 
<child-com> 
 <template v-slot> 
  插槽内容 
 </template> 
</child-com> 
 
//组件模板 
<slot ></slot> 

//父组件 
<child-com> 
 <template v-slot:header> 
  头部 
 </template> 
 <template v-slot:body> 
  内容 
 </template> 
 <template v-slot:footer> 
  脚 
 </template> 
</child-com> 
     
//子组件   
<div> 
 <slot name="header"></slot> 
 <slot name="body"></slot> 
 <slot name="footer"></slot> 
</div> 

<child-com> 
 <template #header> 
  头部 
 </template> 
 <template #body> 
  内容 
 </template> 
 <template #footer> 
  脚 
 </template> 
</child-com> 

// 
<child-com> 
 <template v-slot:header="slotProps"> 
  插槽内容--{{ slotProps.item }} 序号--{{ slotProps.index }} 
 </template> 
</child-com> 
     
//子组件代码 
<template> 
 <div v-for="(item, index) in arr" :key="index"> 
  <slot :item="item" name="header" :index="index"></slot> 
 </div> 
</template> 
<script setup> 
 const arr = ['1111', '2222', '3333'] 
</script> 

<child-com> 
 <template v-slot:[dd()]> 
  动态插槽名 
 </template> 
</child-com> 
 
<script setup> 
const dd = () => { 
  return 'hre' 
}