Question

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

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

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

Answer 1

要传递作用域槽，请以 h() 的形式将第二个参数的 scopedSlots property 用于 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

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

1 个答案: