Как визуализировать несколько слотов в Vue3?

Аргументы 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() также может возвращать функцию рендеринга (функция, которая возвращает VNode из h()):

setup(
  // {Object} Component prop values
  props,

  // {Object} Contains `attrs`, `emit`, and `slots`
  context
)

Свойство slots контекста содержит функции для каждого заданного слота. Эти функции получают аргументы, которые передаются в слот как props, и каждая функция возвращает соответствующий слот VNode. Например, чтобы получить слот beforeVNode и передать реквизит слота 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>
      )
  },
}

демо