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.

Javascript

<!-- ParentComponent.vue -->
<template>
    <div>
        <h2>Parent Component</h2>
        <button @click="callChildMethod">
            Call Child Method
        </button>
        <child-component ref="childRef"/>
    </div>
</template>

<script>
    import ChildComponent from
    './ChildComponent.vue';

    export default {
        components: {
            ChildComponent,
        },
        methods: {
            callChildMethod() {
                const childComponent =
                this.$refs.childRef;
                if (childComponent) {
                    childComponent.childMethod();
                } else {
                    console.error
                    ('Child component reference is undefined.');
                }
            },
        },
    };
</script>

Javascript

<!-- ChildComponent.vue -->
<template>
    <div>
        <h3>Child Component</h3>
    </div>
</template>

<script>
    export default {
        methods: {
            childMethod() {
                console.log
                ('Child method called!');
            },
        },
    };
</script>

Javascript

<!-- App.vue -->
<template>
    <div id="app">
        <parent-component />
    </div>
</template>

<script>
    import ParentComponent from
        './ParentComponent.vue';

    export default {
        components: {
            ParentComponent,
        },
    };
</script>

<style>
    #app {
        font-family:
            Avenir, Helvetica, Arial, sans-serif;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

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.

Javascript

<!-- ParentComponent.vue file -->

<template>
    <div>
        <h2>Parent Component</h2>
        <button @click="callChildMethod">
            Call Child Method
        </button>

        <!-- Display message with transition -->
        <transition name="fade" mode="out-in">
            <div v-if="message" class="message">
                {{ message }}
            </div>
        </transition>

        <child-component ref="childRef" />
    </div>
</template>

<script>
    import ChildComponent from
    './ChildComponent.vue';

    export default {
        components: {
            ChildComponent,
        },
        data() {
            return {
                // Message to be displayed
                message: '',
            };
        },
        methods: {
            callChildMethod() {
                // Access the child component using $refs
                const childComponent = this.$refs.childRef;

                // Check if the child component reference is valid
                if (childComponent) {
                    // Call the method in the child
                    // component and get the result
                    const result = childComponent.childMethod();

                    // Update the message based on the result
                    this.message = result;
                } else {
                    console.error
                    ('Child component reference is undefined.');
                }
            },
        },
    };
</script>

<style>
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .message {
        margin-top: 10px;
        padding: 10px;
        background-color: #4caf50;
        color: #ffffff;
    }
</style>

Javascript

<!-- ChildComponent.vue file -->

<template>
    <div>
        <h3>Child Component</h3>
    </div>
</template>

<script>
    export default {
        methods: {
            childMethod() {
                console.log
                ('Child method called!');
                // Your child component logic here

                // Return a message to the parent
                return
                'Message from Child Component!';
            },
        },
    };
</script>

Javascript

<!-- App.vue -->
<template>
    <div id="app">
        <parent-component />
    </div>
</template>

<script>
    import ParentComponent from
        './components/ParentComponent.vue';


    export default {
        components: {
            ParentComponent
        },
    };
</script>

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.

Javascript

<!-- ParentComponent.vue -->
<template>
    <div>
        <h2>Parent Component</h2>
        <child-component
        @child-method-triggered="callChildMethod" />
    </div>
</template>

<script>
    import ChildComponent from
    './ChildComponent.vue';

    export default {
        components: {
            ChildComponent,
        },
        methods: {
            callChildMethod() {
                console.log
                ('Child method called!');
            },
        },
    };
</script>

Javascript

<!-- ChildComponent.vue -->
<template>
    <div>
        <button @click="triggerChildMethod">
            Call Child Method
        </button>
        <h3>Child Component</h3>
    </div>
</template>

<script>
    export default {
        methods: {
            triggerChildMethod() {
                this.$emit
                ('child-method-triggered');
            },
        },
    };
</script>

Javascript

<!-- App.vue -->
<template>
    <div id="app">
      <parent-component/>
    </div>
    </template>

    <script>
    import ParentComponent from
    './components/ParentComponent.vue';

    export default {
    components: {
      ParentComponent,
    },
    };
    </script>

    <script>
    import { createApp } from 'vue';
    import App from './App.vue';

    createApp(App).mount('#app');
    </script>

Output: