How to get slot props with render functions in Vue?

Question

I'm trying to transform a Vue component I've made in a render function. Problem is I can't find a way to access the named slot props, like in the example:

<template #slot-name="slotProps">
  <MyComponent v-bind="slotProps" />
</template>

There's a way to transform this code in a render function ?

Answer 1

To pass a scoped slot, use the scopedSlots property of the 2nd argument to h() (createElement()) in the form of { name: props => VNode | Array<VNode> }.

For example, assuming your template is:

<MySlotConsumer>
  <template #mySlot="slotProps">
    <MyComponent v-bind="slotProps" />
  </template>
</MySlotConsumer>

The equivalent render function would be:

export default {
  render(h) {
    return h(MySlotConsumer, {
      scopedSlots: {
        mySlot: slotProps => h(MyComponent, { props: slotProps })
      }
    })
  }
}

demo