javascript - 使用yield的Ember渲染组件

Question

我有一个 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>

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

Answer 1

将 my-component1 的 prop1 值传递给 my-other-component3 的方式没有问题。 my-component1 模板文件中的上下文是 my-component1 本身；因此，即使 my-other-component3，prop1 也会从 my-component1 传递到 my-other-component3在 my-yield-component2 中渲染。请看下面twiddle这说明我到目前为止所解释的内容运行顺利。

关于从 my-yield-component2 到 my-other-component3 的值传递是另一回事；你需要yield某物。从 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 中解释的内容您之前的问题。