Ember invoke a component function from another component in same engine parent

Question

my requirement is to use component actions from another component.Need to know whether it is possible to use data-down for this case.

Say,

I'm trying to invoke first-component from here engine/addon/templates/application.hbs like below

engine/addon/templates/application.hbs

    {{#if invokeFirstCompo}}
    <FirstComponent action={{'actionFromSecondCompo'}}/>
    {{/if}}

From this FirstComponent i want to invoke, second-component function handled in

engine/addon/components/SecondComponent.js

actionFromSecondCompo(){
 console.log("Print Invoked secondcomponent");
}

Note: Both components are in same engine parent
i've tried to use **extend** the firstComponent in secomdCompo js like below.

>>engine/addon/components/SecondComponent.js

import FirstComponent from 'engine/components/FirstComponent'; export default FirstComponent.extend({

But issue here is, its invoking willDestroyElement() function from FirstComponent.Hence i don't need the changes handled inside this destroy function.

Answer 1

Relevant documentation is here: https://guides.emberjs.com/release/components/component-arguments-and-html-attributes/

But, the way to pass actions is via direct reference.

For example:

// SecondComponent
export default class extends Component {
  someAction = () => {}
}

{{! second component's template }}
<SomeOtherComponent @foo={{this.someAction}} />

Note that arguments are prefixed with @, and functions on a class are referenced via this.