Vue.js动态布局具有多个插槽的无渲染组件布局

时间:2019-05-21 08:20:28

标签: vue.js

我正在尝试为我的应用程序构建动态布局。我有两种不同的布局,一种是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>

所有这些对于DefaultLayout.vue都可以正常工作,但是当我想使用LayoutWithFooter.vue时,它无法处理其中的两个插槽。这是一个用法示例:

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

现在的问题是,“页脚槽的内容”没有呈现在LayoutWithFooter.vue的页脚槽的内部。

1 个答案:

答案 0 :(得分:1)

首先,我希望您注意在示例中定义插槽级别。您提供了以下代码:

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

但是实际上您的div slot="footer"并不指向footer组件的LayoutWithFooter.vue插槽。无论如何,由于第一个孩子引用了default插槽。结果是:

“您想为default插槽设置内容,并且在此default插槽内尝试为footer插槽设置内容” –但这是两个不同的作用域。

正确的选项类似于下一个示例:

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

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

在这里检查: TableLayoutPanel AutoSize Runtime

P.S。也许有些观点还不太清楚,请回答我的答案,我将尝试解释更多和/或为您提供更多链接和资源。