How to get Access to a Child Method From the Parent in VueJS ?

When working with Vue.js components, it's common to encounter scenarios where you need to access a method inside the parent component that is defined in a child component. This can be useful for triggering specific actions or updating the child component's state.

Below are the methods that can be used to access a child component method from a parent component in VueJS.

Using $refs

This approach involves using the $refs property provided by Vue.js to create a reference to the child component. The parent component can then directly call methods on the child component using this reference.

Example 1: The below code uses $refs to access the child component method from the parent component in VueJS.

Output:

Example 2: The below example includes the advanced VueJS code to show some message on the user screen once the button is clicked and child method get accessed.

Output:

Using Custom Events

This approach involves using Vue.js custom events to establish communication between the parent and child components. The child component emits a custom event, and the parent component listens for that event, triggering the desired method.

Example: The below code uses custom events to access the child component method from the parent component in VueJS.

Output: