如何在 Vue 中获取具有渲染功能的插槽道具？

【问题标题】：How to get slot props with render functions in Vue?如何在 Vue 中获取具有渲染功能的插槽道具？
【发布时间】：2021-07-28 17:52:04
【问题描述】：

我正在尝试转换我在渲染函数中制作的 Vue 组件。问题是我找不到访问命名插槽道具的方法，如示例中所示：

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

有没有办法在渲染函数中转换这段代码？

【问题讨论】：

标签： vue.js

【解决方案1】：

要传递一个作用域槽，请以{ name: props => VNode | Array<VNode> } 的形式将h() (createElement()) 的第二个参数的scopedSlots property 使用。

例如，假设您的模板是：

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

等效的渲染函数是：

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

demo

【讨论】：