Mysterywood
Mysterywood

Reputation: 1668

How to use slot in Vue 2 render function?

I'd like to do the following, but with Vue 2's render function

<template>
  <imported-component>
    <template v-slot:default="{ importedFunction }">
       <button @click="importedFunction">Do something</button>
    </template>
  </import-component>
</template>

Upvotes: 3

Views: 1398

Answers (1)

Dan
Dan

Reputation: 63129

  • Use scopedSlots for the slot
  • Use the slot name ("default") plus function argument for the slot props
  • Use on for the event handler
render(h) {
  return h('imported-component', {
    scopedSlots: {
      default(slotProps) {
        return h('button', {
          on: {
            click: slotProps.importedFunction
          }
        }, 'Do something')
      }
    }
  });
}

Upvotes: 2

Related Questions