Vue - how to pass down slots inside wrapper component?

Question

So I\'ve created a simple wrapper component with template like:

   
<         


        

Answer 1

Vue 3

Same as the Vue 2.6 example below except:

• $listeners has been merged into $attrs so v-on="$listeners" is no longer necessary. See the migration guide.
• $scopedSlots is now just $slots. See migration guide.

---

Vue 2.6 (v-slot syntax)

All ordinary slots will be added to scoped slots, so you only need to do this:

---

Vue 2.5

See Paul's answer.

---

Original answer

You need to specify the slots like this:

---

Render function

render(h) {
  const children = Object.keys(this.$slots).map(slot => h('template', { slot }, this.$slots[slot]))
  return h('wrapper', [
    h('b-table', {
      attrs: this.$attrs,
      on: this.$listeners,
      scopedSlots: this.$scopedSlots,
    }, children)
  ])
}

You probably also want to set inheritAttrs to false on the component.