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"