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


Inside parent-component.hbs

{{yield (hash
     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');

Inside usage.hbs

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