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>

Answer 2

当您使用属性中的名称使组件创建任意数量的插槽标签时：

 <template> <slot name="first"></slot> <slot name="second"></slot> </template> <script> export default { name: 'MyComponent', } </script>

这是如何在组件中使用插槽：

 <MyComponent> <template v-slot:first> <p>I write content in my first slot</p> </template> <template v-slot:second> <p>I write content in my second slot</p> </template> </MyComponent> <script> import MyComponent from '@/components/MyComponent.vue' export default { components: { MyComponent } } </script>