Call Methods on Child Components
To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.
To communicate up the containment hierarchy, fire an event in a child component and handle it in an owner or container component. See Communicate with Events.
Check out the apiMethod component (previously named apiFunction) in the lwc-recipes repo, which calls a method on its clock child component.
This example exposes a getter for an isPlaying property, and play(), and pause() methods in a c-video-player component by adding the @api decorator to them. A parent component that contains c-video-player can read the property and call the methods. Here’s the JavaScript file.
videoUrl is a public property. The @api decorator can be used to define a public property, and a public JavaScript method, on a component. Public properties are another part of the component’s public API.
To access elements that the template owns, the code uses the template property.
Now, let’s look at the HTML file where the video element is defined.
In a real-world component, c-video-player would typically have controls to play or pause the video itself. For this example to illustrate the design of a public API, the controls are in the parent component that calls the public methods.
The c-method-caller component contains c-video-player and has buttons to call the play() and pause() methods in c-video-player. Here’s the HTML.
Clicking the buttons in c-method-caller will play or pause the video in c-video-player after we wire up the handlePlay and handlePause methods in c-method-caller.
Here’s the JavaScript file for c-method-caller.
The handlePlay() function in c-method-caller calls the play() method in the c-video-player element. this.template.querySelector('c-video-player') returns the c-video-player element in methodCaller.html. The this.template.querySelector() call is useful to get access to a child component so that you can call a method on the component.
The handlePause() function in c-method-caller calls the pause() method in the c-video-player element.
To return a value from a JavaScript method, use the return statement. For example, see the isPlaying() method in c-video-player.
To pass data to a JavaScript method, define one or more parameters for the method. For example, you could define the play() method to take a speed parameter that controls the video playback speed.
The querySelector() method is a standard DOM API that returns the first element that matches the selector.
If you’re iterating over an array, consider adding some other attribute to the element, like a class or data-* value, and using it to select the desired element.
The querySelectorAll() method returns an array of DOM Elements.
Don’t pass an id to a query method like querySelector. When an HTML template is rendered, id values can be transformed into globally unique values. If you use an id selector in JavaScript, it doesn’t match the transformed id.
For more information, see developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll and developer.mozilla.org/en-US/docs/Web/API/Element/querySelector.
See Also