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;

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