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>

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

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

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

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>

​