Ember渲染组件使用屈服 [英] Ember rendering component using yield

问题描述

我有一个 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中显示/渲染我的其他组件3（因为我是使用收益率）

So I want to display/render my-other-component3 inside my-yield-component2 (as I am using yield)

里面 my-yield-component2 ，我有以下;

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

我的问题是如何通过/访问实际定义在my- component1，但是因为我使用yield，它会被渲染在我的yield-component2
所以我想知道如何传递prop1？

My question is how do I pass/get access to "prop1" which is actually defined in my-component1, but because I am using yield, it would be rendered in my-yield-component2 So I want to know how to pass "prop1" ?

推荐答案

prop1 的价值 my-component1 的方式没有任何问题传递给 my-other-component3 。 my-component1 的模板文件中的上下文是 my-component1 本身;因此 prop1 将从 my-component1 传递到 my-other-component3 即使 my-other-component3 在 my-yield-component2 中呈现。请查看以下

There is nothing wrong with the way prop1 value of my-component1 is passed to my-other-component3. The context within my-component1's template file is my-component1 itself; hence prop1 will be passed from my-component1 to my-other-component3 even if my-other-component3 is rendered within my-yield-component2. Please take a look at the following twiddle that illustrates what I explained so far works smoothly.

关于从 my-yield-component2 到 my-other-component3 是另一个故事;您需要收益 sth。从 my-yield-component2 的模板中，将其传递给 my-other-component3 ，如下所示：

Regarding value passing from my-yield-component2 to my-other-component3 is another story; where you need to yield sth. from the template of my-yield-component2 and pass it to my-other-component3 as follows:

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

我已经提供了一个工作 twiddle 我之前在一个你以前的问题。

I have already provided a working twiddle of what I explained above in one of your previous questions.

这篇关于Ember渲染组件使用屈服的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！