如何在 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 })
      }
    })
  }
}

演示