我正在尝试为我的应用程序构建动态布局。我有两种不同的布局,一种是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
的页脚槽的内部。
答案 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>
我根据您提供的代码和结构准备了一些示例。您可以在其中切换布局并查看其工作方式,并在一种布局中使用不同的组件插槽。
P.S。也许有些观点还不太清楚,请回答我的答案,我将尝试解释更多和/或为您提供更多链接和资源。