Vue. js рендеринг нескольких слотов

Question

У меня есть следующее приложение:

<template>
    <component :is="layout">
        <router-view :layout.sync="layout"/>
    </component>
</template>

<script>
    import LayoutBlank from './LayoutBlank'

    export default {
        name: 'app',
        data() {
            return {
                layout: LayoutBlank,
            };
        },
    }
</script>

<script>
    import LayoutBlankTemplate from './LayoutBlankTemplate'

    export default {
        name: 'LayoutBlank',
        created() {
            this.$parent.$emit('update:layout', LayoutBlankTemplate);
        },
        render() {
            return this.$slots.default[0];
        },
    }
</script>

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'LayoutBlankTemplate',
    }
</script>

<template>
    <layout-blank>
        Test content
    </layout-blank>
</template>

<script>
    import LayoutBlank from './LayoutBlank';
    export default {
        name: 'BlankTest',
        components: {LayoutBlank},
    }
</script>

Все работает отлично. Но теперь я хотел бы добавить еще один слот в LayoutBlankTemplate:

<template>
    <div>
        <slot></slot>
        <slot name="second"></slot>
    </div>
</template>

<script>
    export default {
        name: 'LayoutBlankTemplate',
    }
</script>

и использовать его в BlankTest:

<template>
    <layout-blank>
        <template #default>Test content</template>
        <template #second>Second test content</template>
    </layout-blank>
</template>

<script>
    import LayoutBlank from './LayoutBlank';
    export default {
        name: 'BlankTest',
        components: {LayoutBlank},
    }
</script>

Код отображает только содержимое слота по умолчанию. Проблема в том, что я использую return this.$slots.default[0]; в компоненте LayoutBlank, который отображает только содержимое слота по умолчанию.

Я не могу найти способ отрисовки всех слотов в методе LayoutBlank :: render (). Я знаю, что могу получить список слотов, используя this. $ Slots или this. $ ScopedSlots, но не могу найти способ передать их в LayoutBlankTemplate, чтобы они отображались.

Answer 1

Вы можете поместить слоты в элементы, которые вы создаете, я верю. Это упомянуто (кратко) в функции рендеринга документации .

Это может быть не тот макет, который вы хотите, но, например,

<script>
import LayoutBlankTemplate from './LayoutBlankTemplate'

export default {
  name: 'LayoutBlank',
  created() {
    this.$parent.$emit('update:layout', LayoutBlankTemplate);
  },
  render(createElement, context) {
    return createElement('div', {}, [
      createElement('div', {}, this.$slots.default),
      createElement('div', {}, this.$slots.second)
    ])
  },
}
</script>