wrapper components

components.my-child.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'',
  actions:{
    toggle(){
      this.get('toggle')()
    }
  }
});

components.my-parent.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'',
  childComp:'my-child',
  childText: 'clickme',
  actions:{
    handleClick(){
      this.get('didClick')()
    },
    otherClick(){
      console.log('other click')
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions:{
    didClick(){
      console.log('parent received action')
    }
  }});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-parent
	didClick = (action 'didClick')
}}

{{my-parent
	didClick = (action 'didClick')
  childText = "clickme too"
}}

{{#my-parent
	didClick = (action 'didClick')
  option2=true
  as | toggle |
}}
  {{my-component toggle=toggle}}
{{/my-parent}}

{{#my-parent
	didClick = (action 'didClick')
  option2=true
  as | toggle |
}}
  <button {{action toggle}}>I don't even need a child component and the parent holds the action</button>
  {{!--alternatively, you can use {{my-parent/childButton {{action toggle}} if you don't need any custom markup to use the default childComponent--}}
{{/my-parent}}

templates.components.my-child.hbs

{{text}}

templates.components.my-component.hbs

<button {{action toggle}}>internal component by on by default</button>

templates.components.my-parent.hbs

{{#if option2}}
  {{yield (action 'handleClick')}}
{{else}}
  <button {{action 'handleClick'}}>
  {{component childComp
    text=childText
  }}
  </button>
{{/if}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}