如何在Vue3中渲染多个插槽

Question

如何使用h()函数在Vue3setup()函数中呈现以下模板？

<label v-for="service in services" :key="service">
<slot name="before" :service="service"></slot>
foobar
<slot name="after" :service="service"></slot>
</label>

Answer 1

h()参数为：

// @returns {VNode}
h(
// {String | Object | Function } tag
// An HTML tag name, a component or an async component.
// Using function returning null would render a comment.
//
// Required.
'div',
// {Object} props
// An object corresponding to the attributes, props and events
// we would use in a template.
//
// Optional.
{},
// {String | Array | Object} children
// Children VNodes, built using `h()`,
// or using strings to get 'text VNodes' or
// an object with slots.
//
// Optional.
[
'Some text comes first.',
h('h1', 'A headline'),
h(MyComponent, {
someProp: 'foobar'
})
]
)

组件的setup()参数如下。setup()还可以返回渲染函数(从h()返回VNode的函数(：

setup(
// {Object} Component prop values
props,
// {Object} Contains `attrs`, `emit`, and `slots`
context
)

上下文的slots属性包含每个给定插槽的函数。这些函数接收作为道具传递给插槽的参数，每个函数返回相应插槽的VNode。例如，要获得before插槽的VNode并传递service的插槽道具，请调用context.slots.before({ service: 'myService' })。

因此，模板的等效渲染功能将类似于以下内容：

import { h } from 'vue'
export default {
props: {
services: {
type: Array,
default: () => [],
},
},
setup({ services }, { slots }) {
return () =>
services.map((service) =>
h(                             //
'label',                     //
{                            // <label :key="service">
key: service,              //
},                           //
[
slots.before({ service }), //   <slot name="before" :service="service" />
'foobar',                  //   foobar
slots.after({ service })   //   <slot name="after" :service="service" />
]
)                              // </label>
)
},
}

演示