我正在构建一个小型库,它允许从其他组件中修改应用程序布局的一部分。
基本思想是拥有一个主要的导航组件:
<template>
<div class='main-navigation>
<div class='logo'><img...>
<div class='actions'>
<Container name='extra-actions' />
<a href="some-action">Action</a>
</div>
</template>
然后组件可以注册其他内容:
<template>
<div class='home-page'>
<ContentFor container="extra-actions">
<a href='some-home-specific-action'>Do sth extra</a>
</ContentFor>
...rest of the page
</div>
</template>
我已经设法使上述工作正常工作,使用自定义插件和服务对象将插槽注册(和更新)为 ContentFor 中定义的 VNode 并将其呈现在容器中。我现在想通过允许用户根据给定的内容添加自定义布局来增强它,例如:
<ul class='actions'>
<Container name='extra-actions'>
<li><slot></slot></li>
</Container>
</ul>
这将很好地将视图组件与导航结构分离。我尝试了以下方法:
render (h) {
return h(Fragment, Object.values(this.contents).map((content) => {
if (this.$scopedSlots.default) {
return this.$scopedSlots.default({
slots: { default: content.slot } # this does nothing!
})
} else {
# This works as expected
return content.slot
}
}))
},
当没有自定义模板时,上述工作正常。当存在自定义模板时,它会呈现该模板,但不会将内容传递到模板的插槽,从而导致:
<ul class='actions'>
<li></li> # instead of <li><a href='some-home-specific-action'>Do sth extra</a></li>
</ul>
是否有任何特定的方式可以将范围传递给其他范围?