#6 块参数

英文原版: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中的样子。

本节完

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值