vue.js - 如何在 Vue 中获取带有渲染功能的插槽 Prop ？

Question

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

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

有一种方法可以在渲染函数中转换这段代码吗？

Answer 1

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

例如，假设您的模板是:

<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