ember.js Component - communication between child to parent component. Composable Components


Example

Inside parent-component.hbs

{{yield (hash
   child=(
     component 'child-component'
     onaction=(action 'parentAction')
   )
)}}

Inside parent-component.js

export default Ember.Component.extend({
  actions: {
    // We pass this action to the child to call at it's discretion
    parentAction(childData) {
      alert('Data from child-component: ' + childData); 
    }
  }
});

Inside child-component.js

export default Ember.Component.extend({
  // On click we call the action passed down to us from the parent
  click() {
    let data = this.get('data');
    this.get('onaction')(data); 
  }
});

Inside usage.hbs

{{#parent-component as |ui|}}
  {{#each model as |item|}}
    {{ui.child data=item}}
  {{/each}}
{{/parent-component}}