Ember rendering component using yield

Question

I have a my-component1.js defined as below;

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

The corresponding template my-component1.hbs is as below;

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

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

Inside my-yield-component2 , I have the following;

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

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" ?

Answer 1

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.

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}}

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