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

Question

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

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

有一种方法可以在渲染 function 中转换此代码吗？

Answer 1

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

例如，假设您的模板是：

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

等效的渲染 function 将是：

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

演示