Vue.js 渲染多个插槽答案

【问题标题】：Vue.js render multiple slotsVue.js 渲染多个插槽
【发布时间】：2020-06-03 19:49:53
【问题描述】：

我有以下应用：

<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>

代码仅呈现默认插槽内容。问题是我在 LayoutBlank 组件中使用了return this.$slots.default[0];，它只呈现默认插槽内容。

我找不到如何在 LayoutBlank::render() 方法中渲染所有插槽的方法。我知道我可以使用 this.$slots 或 this.$scopedSlots 获取插槽列表，但我找不到如何将它们传递给 LayoutBlankTemplate 以使它们呈现的方法。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

我相信您可以将插槽放入您创建的元素中。这在渲染函数 documentation 中（简要地）提到。

这可能不是您想要的布局，但例如，

<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>

【讨论】：