Sometimes, we want to pass down slots inside wrapper component with Vue.js.

In this article, we’ll look at how to pass down slots inside wrapper component with Vue.js.

How to pass down slots inside wrapper component with Vue.js?

To pass down slots inside wrapper component with Vue.js, we can use the $scopedSlots property.

For instance, we write

<template>
  <wrapper>
    <b-table v-bind="$attrs" v-on="$listeners">
      <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"
        ><slot :name="slot" v-bind="scope"
      /></template>
    </b-table>
  </wrapper>
</template>

to loop through the $scopedSlots property with v-for.

And then we get the slot name from the slot property.

We then set the slot to name and the scope of the slot to v-bind to pass down the name and variables.

Conclusion

To pass down slots inside wrapper component with Vue.js, we can use the $scopedSlots property.