Ember Rendering Component Using Yield

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

Solution 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.