[英]Is it possible to define slots in neos fusion afx like you can in Vue?
In Vue.js I can define named slots for my components, besides my default slot:在 Vue.js 中,除了我的默认插槽之外,我还可以为我的组件定义命名插槽:
<article>
<header>
<slot name="header">
<h2>Default heading</h2>
</slot>
</header>
<slot/>
</article>
and then use it like this:然后像这样使用它:
<template>
<FooArticle v-for="item in items">
<template #heading>
<h3>{{item}} Heading</h3>
</template>
<p>Just content</p>
</FooArticle>
</template>
<script>
export default {
name: 'App',
components: {
FooArticle
},
data() {
return {
items: ['First', 'Second']
}
}
}
</script>
Is this possible with Neos Fusion, to create a mechanism like this? Neos Fusion 是否可以创建这样的机制?
Yes this is possible, as you can use the @path
decorator to overwrite a property of the wrapper element.是的,这是可能的,因为您可以使用
@path
装饰器覆盖包装器元素的属性。
First you define your props and then output them in the renderer.首先你定义你的道具,然后在渲染器中输出它们。
prototype(Foo.Components:Article) < prototype(Neos.Fusion:Component) {
heading = afx`<h2>Default heading</h2>`
content = ''
renderer = afx`
<article>
<header>
{props.heading}
</header>
{props.content}
</article>
`
}
Then you want to override these "slots" (props) from the outside with the @path
decorator.然后,您想使用
@path
装饰器从外部覆盖这些“插槽”(道具)。 The whole element the decorator is defined on will override the specified prop "heading" of the wrapping element.定义装饰器的整个元素将覆盖包装元素的指定道具“标题”。
prototype(Foo.Site:Home) < prototype(Neos.Fusion:Component) {
items = ${['First', 'Second']}
renderer = afx`
<Neos.Fusion:Loop items={props.items}>
<Foo.Components:Article>
<Neos.Fusion:Fragment @path="heading">
<h3>{item} heading</h3>
</Neos.Fusion:Fragment>
<p>just some content</p>
</Foo.Components:Article>
</Neos.Fusion:Loop>
`
}
FYI, we use a Neos.Fusion:Fragment
object to define the path decorator, so the fragment does not render any additional markup like an enclosing <div>
.仅供参考,我们使用
Neos.Fusion:Fragment
对象来定义路径装饰器,因此片段不会像封闭的<div>
那样呈现任何额外的标记。 In this simple case, where we only want to render a single element into the slot, we could have omitted the fragment and just set the @path="heading"
directly to the <h3>
.在这个简单的例子中,我们只想将单个元素渲染到插槽中,我们可以省略片段并直接将
@path="heading"
设置为<h3>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.