ember * 3.5 使用块级参数

组件可以传入属性,参见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|}}
    

{{title}}

{{author}}

{{body}}

{{/blog-post}}

名称按照他们在组件模板中传递给yield的顺序绑定。

在一个组件中支持块和内联组件使用

可以使用has-block帮助程序从单个组件模板组件的块和内联的使用。

// in component blog-post.hbs
{{#if (has-block)}}
    {{yield post.title post.body post.author}}
{{else}}
    

{{post.title}}

Author by {{post.author}}

{{post.body}}

{{/if}}

这具有在使用内联形式的组件时提供默认模板的效果,但是在使用块表达式时为块参数提供使用的值。

你可能感兴趣的:(ember * 3.5 使用块级参数)