Vue3 具名插槽+作用域插槽同时使用的方法

子插槽      <slot :itemA="传递的信息A" :indexB="传递的信息B" name="slotName"></slot>

父插槽

<template v-slot:showName="slotProps"  >
  <button>{{slotProps.itemA}}</button>
  <h2>{{slotProps.indexB}}</h2>
</template>

关键点就是红色加粗部分 v-slot:showName="slotProps" 这样既绑定了插槽名称,又接收了子插槽内容

也可以写成#showName="slotProps"