When do you use yield in components?

Question

I'm curious as to how other devs use {{yield}} in components. In my case, I rarely use it. I just usually pass what I would like to {{yield}} into an attribute. I only use {{yield}} when I want the component to act like a web component (which doesn't happen very much).

Any of you guys have like a rule/best practice on when to use {{yield}}?

Answer 1

Don't use {{yield}} if you don't feel any need for it. :)

The benefits of using {{yield}} are:

1. You can pass Handlebars-generated HTML, not just a string.
2. Thus, you can use Ember components.
3. The context of the passed block belongs to the parent, not to the component that yields. It's super handy.

The natural use for {{yield}} is to decorate a template block with some HTML.

Note that, using this trick, you can pass multiple blocks into a component and yield them in different parts of the component's HTML.

Answer 2

Use yield if you want to use your components in a block form with dynamic content. This is usually useful for example to wrap a area multiple times the same way.

A good example is a input wrapper, that provides some tags and css fun, as well as showing the label, but you yield where you want to put an {{input}} or an <select>