close

How to access to a child method from the parent in vue.js

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to access to a child method from the parent in vue.js in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to access to a child method from the parent in vue.js ?

  1. How to access to a child method from the parent in vue.js ?

    to access to a child method from the parent in vue.js To communicate a child component with another child component I've made a method in parent which calls a method in a child with:
    this.$refs.childMethod()

  2. How to access to a child method from the parent in vue.js ?

    to access to a child method from the parent in vue.js To communicate a child component with another child component I've made a method in parent which calls a method in a child with:
    this.$refs.childMethod()

Method 1

The suggested solution is for Vue 2, but if you end up here looking for a Vue 3 Composition API solution, you can do the following when migrating :

A child component in a template, which has method “doSomething” :

 <div class="form">                                                                                                                                                        
      <child-component ref="childComponentRef" />                                                                      
</div>  

With Vue 2 :

this.$refs.childComponentRef.doSomething( );
       

With Vue 3 Composition Api :

    setup( )
    {
        const childComponentRef = ref( );

        childComponentRef.value.doSomething( )

        return {
           childComponentRef
        }
     } 

Method 2

To communicate a child component with another child component I’ve made a method in parent which calls a method in a child with:

this.$refs.childMethod()

And from the another child I’ve called the root method:

this.$root.theRootMethod()

It worked for me.

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment