Vue.js动态布局多插槽无渲染组件布局

我正在尝试为我的应用程序构建一个动态布局。我有两种不同的布局，一种是

DefaultLayout.vue

：

第二个是

LayoutWithFooter.vue

，有两个插槽：

处理动态布局的无渲染组件如下所示：

<script>
    import Vue from 'vue';
    import DefaultLayout from './DefaultLayout';
    import LayoutWithFooter from './LayoutWithFooter';

    export default {
        props: {
            name: {
                type: String,
                required: true
            }
        },
        created(){
            this.registerComponent("DefaultLayout", DefaultLayout);
            this.registerComponent("LayoutWithFooter", LayoutWithFooter);
            this.$parent.$emit('update:layout', this.name);
        },
        methods: {
            registerComponent(name, component) {
                if(!Vue.options.components[name]) {
                    Vue.component(name, component);
                }
            }
        },

        render() {
            return this.$slots.default[0];
        },
    }
</script>

---

现在的问题是，“页脚槽的内容”没有在

LayoutWithFooter.vue的页脚槽内呈现。首先，我希望您注意在示例中定义槽级别。您提供了以下代码：

<template>
  <layout name="LayoutWithFooter">
    <div>
      <div>some content</div>
      <div slot="footer">content for the footer slot</div>
    </div> 
  </layout>
</template>

我根据您提供的代码和结构准备了一些示例。在这里，您可以切换布局，查看其工作原理，并在一个布局中使用不同的组件插槽

请在此处查看：

另外，可能有些地方不太清楚，请回答我的答案，我会尝试解释更多和/或提供更多的链接和来源。
请分享详细的代码库，然后这个问题可能会得到一个建议。你是否尝试将
作为
的直接孩子移动？@c16n我面临着同样的问题。你找到解决办法了吗？
<template>
  <layout name="LayoutWithFooter">
    <!-- default slot content -->
    <div>
      <div>some content</div>
    </div>

    <!-- footer slot content -->
    <div slot="footer">content for the footer slot</div>
  </layout>
</template>