小编c16*_*16n的帖子

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

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

第二个是LayoutWithFooter.vue，有两个插槽：

<template>
  <div>
    <main>
      <slot/>
    </main>
    <footer>
      <slot name="footer"/>
    </footer>
  </div>
</template>

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

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

所有这些都适用于 ， …