如何在 Vue 2 渲染函数中使用插槽？

问题描述

我想做以下事情，但使用 Vue 2 的渲染功能

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

解决方法

• 使用 scopedSlots 作为插槽
• 使用插槽名称（“默认”）加上插槽道具的函数参数
• 使用 on 作为事件处理程序

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