Cascading wrapper components in Vue 3

[straurob]

Given the following "wrapper component" DefaultButton for a Quasar QBtn (but I guess the question is not specific to Quasar), I make use of v-bind="$attrs" and a v-for loop for passing down the slots.

DefaultButton.vue

<template>
  <q-btn v-bind="$attrs" color="primary" outline rounded>
    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </q-btn>
</template>

<script setup></script>

Now if I'd like to create another wrapper for DefaultButton.vue, is it necessary to repeat inserting v-bind="$attrs" and the slot template?

SomeIconButton.vue

<template>
  // Is this sufficient?
  <default-btn icon="some-icon"></default-btn>

  // Or is this required?
  <default-btn v-bind="$attrs" icon="some-icon">
    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </default-btn>
</template>

<script setup />
</script>

[tony19]

Yes, it's necessary to repeat the v-bind="$attrs" and the slot template at each level of nesting if you want to continue forwarding the attrs/slots to the inner components.

[straurob]

This seems to be only true when there is more than one child element: https://vuejs.org/guide/components/attrs.html