[英]How to get slot props with render functions in Vue?
I'm trying to transform a Vue component I've made in a render function.我正在尝试转换我在渲染 function 中制作的 Vue 组件。 Problem is I can't find a way to access the named slot props, like in the example:
问题是我找不到访问命名插槽道具的方法,如示例中所示:
<template #slot-name="slotProps">
<MyComponent v-bind="slotProps" />
</template>
There's a way to transform this code in a render function?有一种方法可以在渲染 function 中转换此代码吗?
To pass a scoped slot, use the scopedSlots
property of the 2nd argument to h()
( createElement()
) in the form of { name: props => VNode | Array<VNode> }
要传递作用域插槽,请使用
h()
( createElement()
) 的第二个参数的scopedSlots
属性,形式为{ name: props => VNode | Array<VNode> }
{ name: props => VNode | Array<VNode> }
. { name: props => VNode | Array<VNode> }
。
For example, assuming your template is:例如,假设您的模板是:
<MySlotConsumer>
<template #mySlot="slotProps">
<MyComponent v-bind="slotProps" />
</template>
</MySlotConsumer>
The equivalent render function would be:等效的渲染 function 将是:
export default {
render(h) {
return h(MySlotConsumer, {
scopedSlots: {
mySlot: slotProps => h(MyComponent, { props: slotProps })
}
})
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.