I have a nested child component like this:
<app-main> <child-component /> </app-main>
My appMain
component needs to invoke a method on child-component.
How to invoke a method on the child-component?
To call a method in a child component with Vue. js, we can pass in a prop from the parent component to its child. Then in the child component, we watch the prop's value and run the method we want. in the child component to register the testProp prop and add the sayHello method.
It's better to pass props into the child component and then have a button click in the parent change the parent's state, and pass a state item into the child which will trigger the child's componentWillReceiveProps , and use that as a trigger.
Step 1) Create Child component with Aura:Method. Step 2) Create Child Class Controller to Get argument "event. getParam('arguments');" and return the message. Step 3) Create a parent Component and a button to call Aura method.
in LWC, we have to use the @api decorator to make the children properties/method public available so a parent can be able to call it directly using JavaScript API. For example, create one public method (which we need to access in parent component) in ChildComponent with @api decorator like below.
You can get a reference to an element using
@ViewChild('childComponent') child;
where childComponent
is a template variable <some-elem #childComponent
>` or
@ViewChild(ComponentType) child;
where ComponentType
is the type of a component or directive and then in ngAfterViewInit
or an event handlers call child.someFunc()
.
ngAfterViewInit() { console.log(this.child); }
See also get hold of an element in the template
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With