javascriptvue.jsvuejs2vue-componentvue-render-function

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>

Solution

  • render(h) {
      return h('imported-component', {
        scopedSlots: {
          default(slotProps) {
            return h('button', {
              on: {
                click: slotProps.importedFunction
              }
            }, 'Do something')
          }
        }
      });
    }