英文原版:https://guides.emberjs.com/v2.14.0/components/block-params/
组件可以被传入参数,同时组件也可以通过块参数来返回输出。
通过{{yield}}从组件返回值
app/templates/index.hbs
{{blog-post post=model}}
app/templates/components/blog-post.hbs
{{yield post.title post.body post.author}}
在这里,post模型被当做参数传入了blog-post组件。同时,组件通过yield来返回传入的值。在这种情况下,返回的值是从被传入的参数post模型中提取的,并且组件可以从它能访问到的任何地方来提取值,比如组件内的属性。
使用块参数的值
块表达式可以将块参数通过名称绑定到块内使用的yield值上。这将使得在使用组件时可以定制模板,而且组件对任何事件的处理行为都将被保留。
app/templates/index.hbs
{{#blog-post post=model as |title body author|}}
<h2>{{title}}</h2>
<p class="author">by {{author}}</p>
<p class="post-body">{{body}}</p>
{{/blog-post}}
这些变量名称将会按照被传入组件模板的顺序被绑定。
同时支持块方式和普通方式的组件用法
通过在模板中使用hasBlock 属性,就可以支持块和飞块方式的组件模板:
app/templates/components/blog-post.hbs
{{#if hasBlock}}
{{yield post.title post.body post.author}}
{{else}}
<h1>{{post.title}}</h1>
<p class="author">Authored by {{post.author}}</p>
<p>{{post.body}}</p>
{{/if}}
这个效果就是当组件是以默认非块的方式使用的,那么组件模板就else中的样子,如果组件是以块方式来使用的,那么就是if中的样子。
本节完