Ember 渲染组件使用 yield

【问题标题】：Ember rendering component using yieldEmber 渲染组件使用 yield
【发布时间】：2018-01-10 12:06:35
【问题描述】：

我有一个my-component1.js 定义如下；

export default Ember.Component.extend({ 
prop1: 'abc'
})

对应的模板my-component1.hbs如下；

{{#my-yield-component2}}
    {{my-other-component3 field=(my-helper prop1)}}
{{/my-yield-component2}}

所以我想在 my-yield-component2 中显示/渲染 my-other-component3（因为我正在使用 yield）

在my-yield-component2里面，我有以下内容；

<div>My component with yield</div>
<div>{{yield}}</div>

我的问题是如何传递/获取对 my-component1 中实际定义的“prop1”的访问权限，但是因为我使用的是 yield，所以它将在 my-yield-component2 中呈现所以我想知道如何传递“prop1”？

【问题讨论】：

没有错，它会起作用，这就是上下文组件的力量。

标签： javascript jquery ember.js

【解决方案1】：

my-component1 的 prop1 值传递给 my-other-component3 的方式没有任何问题。 my-component1 的模板文件中的上下文是 my-component1 本身；因此prop1 将从my-component1 传递到my-other-component3，即使my-other-component3 在my-yield-component2 中呈现。请看一下下面的twiddle，它说明了我到目前为止解释的内容很顺利。

关于从my-yield-component2 到my-other-component3 的值传递是另一回事；在哪里你需要yield sth。从my-yield-component2的模板传给my-other-component3，如下：

{{#my-yield-component2 as |valueToYield|}}
    {{my-other-component3 field=(my-helper prop1) otherField=valueToYield}}
{{/my-yield-component2}}

我已经提供了一个有效的twiddle，我在上面的one 中解释了你之前的问题。

【讨论】：