组件可以传入属性,参见Passing Properties to a Component,但他们也能返回要在块表达式中使用的输出。
使用yield
从组件返回值
//in index.hbs
{{blog-post post=model}}
//in component blog-post.hbs
{{yield post.title post.body post.author}}
在这里,整个博客文章model作为单个组件属性传递给组件。反过来,组件使用yield
返回值,在这种情况下,yield
需要的值从被传入的文章中获取,但是组件可以访问的任何东西都可以使用yileld
方法展示,例如内部属性或者来自service的东西。
使用块级参数消耗产生的值
然后块表达式可以使用块级参数将名称绑定到任何在块中使用的yielded的值。这允许在使用组件时进行模板自定义,其中标记由使用的模板提供。但是任何保留组件中实现的任何事件处理行为,例如click ()
处理程序。
//in index.hbs
{{#blog-post post=model as |title body author|}}
<h2>{{title}}</h2>
<p class="author">{{author}}</p>
<p class="post-body">{{body}}</p>
{{/blog-post}}
名称按照他们在组件模板中传递给yield
的顺序绑定。
在一个组件中支持块和内联组件使用
可以使用has-block
帮助程序从单个组件模板组件的块和内联的使用。
// in component blog-post.hbs
{{#if (has-block)}}
{{yield post.title post.body post.author}}
{{else}}
<h1>{{post.title}}</h1>
<p class="author">Author by {{post.author}}</p>
<p>{{post.body}}</p>
{{/if}}
这具有在使用内联形式的组件时提供默认模板的效果,但是在使用块表达式时为块参数提供使用的值。
网友评论