Context and Actions

components.child-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  label: "child-component"
});

components.grandchild-component.js

import Ember from 'ember';
import { inject as service } from '@ember/service';
import { alias } from '@ember/object/computed';

export default Ember.Component.extend({
  myService: service(),
  label: "grandchild-component"
});

components.parent-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  label: 'parent-component',
  someFunc() {
      alert(`This is inside the parent-component but is in the ${this.label} context`);
  },
  actions: {
    someAction() {
      alert(`This is inside the parent-component but is in the ${this.label} context`);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Lookin at some Actions'
});

services.my-service.js

import Ember from 'ember';

export default Ember.Service.extend({
  label: 'my-service',
  serviceFunc(){
    alert(`This is inside my-service but is in the ${this.label} context`);
  },
  actions: {
    serviceAction(){
      alert(`This is inside my-service but is in the ${this.label} context`);
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<ParentComponent />

templates.components.child-component.hbs

CHILD COMPONENT
{{yield}}
<GrandchildComponent 
  @someFunc={{someFunc}}
  @someActionFunc={{action someFunc}}
  @someAction={{action someAction}} />

templates.components.grandchild-component.hbs

{{yield}}

<br>
<h3>Component Actions</h3>
<button onclick={{action @someFunc}}>Some Func</button>
<button onclick={{action @someActionFunc}}>Some Action Func</button>
<button onclick={{action @someAction}}>Some Action</button>

<h3>Service Actions</h3>
<button onclick={{action myService.serviceFunc}}>Some Service Function</button>
<button onclick={{action 'serviceAction' target=this.myService}}>Some Service Action</button>

templates.components.parent-component.hbs

{{yield}}
PARENT COMPONENT
<ChildComponent 
  @someFunc={{someFunc}}
  @someAction={{action 'someAction'}} />

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"
  }
}