Pass all scoped slots b/w components

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 -

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

Last updated:
Categories: Vue
Tags: VueJS
comments powered by Disqus