Pass all scoped slots b/w components

📅 Oct 16, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

#VueJS

A nice way to pass along all scoped slots to a component.

We can pass all props from the source component to target using this code -

1
2
3
4
5
6
7


<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>

Found this in this StackOverflow post.

Why do this?

You probably would do this when you have a component that is collating other components to get things done. The source component would then have to proxy what it received to the target components so that any conditional rendering/processing can happen based on inputs.

Stay in touch!

Share on

WRITTEN BY

Prashanth Krishnamurthy

Technologist | Creator of Things

Pass all scoped slots b/w components

See Also