Public API for parent/child component lookup?

1

There’s a few ways that I’m aware of

  • Component#parentView
  • Component#childViews
  • Component#nearestWithProperty et al

But from what I see they are all private APIs

2

Explicit parent/child registration tends to work the best. In many of my components I use this pattern:

parent.hbs

{{yield
    (hash 
      register=(action "registerChild")
      unregister=(action "unregisterChild"))
}}

child.js

Component.extend({

  parent: null,

  willDestroy() {
    this._super();
    this.parent.unregister(this);
  },

  init() {
    this._super();
    this.parent.register(this);
  }
})

template usage

{{#parent-component as |pc|}}
  {{#each someAttr as |something|}}
    {{#child-component parent=pc as |item|}}
      ...
    {{/child-component}}
  {{/each}}
{{/parent-component}}

This pattern works particularly well if the parent is in charge of managing it’s own children, but can also be used for allowing users to register children. However, contextual components with a pre-supplied parent would probably work better for components which don’t manage their own children.