Scoped Slots in Vue 3

How to write this with v-slot?

<template
    v-for="(slot, key) in $scopedSlots"
    :slot="key"
    slot-scope="scope"
>
    <slot :name="key" v-bind="scope" />
</template>

Hello @Kaylle
Hope you are very well.
I’m provide some link, you can use this:-https://javascript.plainenglish.io/vue-3-named-slots-and-slot-props-3e55c819f569

Thank you

I tried this but it doesn’t working (

<template v-for="(slot, key) in $scopedSlots">
    <slot v-bind:slot="slot" />
</template>

This how I do it without v-for

<template v-slot:body="scope">
    <slot name="body" v-bind="scope" />
</template>

But how I include v-for there?

Can you give us a replication of what you’re trying to loop through.

Something like this is how you’d normally loop a slot, but your use case is a bit different.

<ul>
  <li v-for="item in items">
    <slot name="item" v-bind="item"></slot>
  </li>
</ul>

You could also consider using a render function instead so you have more power over the slots.

I’m trying to pass slot to child of child component

I have component “Client.vue”

<TableComponent >
      <template v-slot:body="props">
          Some data for 'body' slot
      </template>
      <template v-slot:item="props">
          Some data for 'item' slot
      </template>
</TableComponent >

I have component “TableComponent.vue” where I want to use loop

<q-table>
    <template v-slot:body="scope" >
        <slot name="body" v-bind="scope" />
    </template>
    <template v-slot:item="scope" >
        <slot name="item" v-bind="scope" />
    </template>
</q-table>

I found it

<template v-for="(_, name) in $slots" v-slot:[name]="slotData">
    <slot :name="name" v-bind="slotData" />
</template>

Thanks anyway)