How to Access Child Method From the Parent in VueJS ?

In this article, we are going to discuss how can we access the child method from the parent in VueJS. We need to create such a component that shows the use of accessing the child methods from the parent component.

Approach:

• We will create two components ParentMethod and ChildComponent.
• ParentMethod vue.js component consists of a parent component which is named as “ParentMethod” and this method also includes a child component which is named as “ChildComponent” as we can also see in the code that the parent component also has a template and this template is with a view which contains a child component and a message called as displaydiv finally the component or the child component is passed as a method called “ParentMethodCall” as prop.
• ChildComponent vue.js component consists of a Child component which is named as “ChildComponent” it contains three different developments that are clickable they are labelled as “G”, “F” and “G”. We can also see that each of the div elements has an click event handler which is defined as “v-on:click” this triggers the “ClickEvent” method when it is clicked what happens then is that the click event updates the msg data property with a message that is concatenated with the data received as an argument after this it also logs the message to the console and then calls the method which is passed as a prop named call method with the same data.

Example: This example shows the implementation of the above-explained approach.

ParentMethod.vue

<template>
  <div >
    <child-component :callMethod="parentMethodCall">
    </child-component>
<br/>
<div class="msg">{{msg}}</div>
</div>
</template>
<script>
import Vue from "vue";
import ChildComponent from "@/components/ChildComponent";
export default {
  components: {
    ChildComponent: ChildComponent
  },
  name: "ParentMethod",
  data() {
    return {
      msg: "MSG from parent method:"
    };
  },
  methods: {
    parentMethodCall: function(data) {
      this.msg = "MSG from parent method: " + data;
      console.log(this.msg);
    }
  }
};
</script>
<style scoped>

.msg{
  color: green;
  font-size: 15px;
}
</style>

ChildComponent.vue

<template>
  <div>
  <div style="cursor:pointer;" v-on:click="clickEvent('G')">G</div>
  <div style="cursor:pointer;" v-on:click="clickEvent('F')">F</div>
  <div style="cursor:pointer;" v-on:click="clickEvent('G')">G</div>
  <div class="msg">{{msg}}</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
  name: "ChideComponent",
  data() {
    return {
      msg: "MSG from child method:"
    };
  },
  props: {
    callMethod:  ""
  },
  methods:{
    clickEvent(data){
      this.msg= "MSG from child method: "+ data
      console.log(this.msg);
      this.callMethod(data);
    }
  }
};

</script>
<style scoped>
.msg{
  color: red;
  font-size: 15px;
}
</style>

Output: Once we execute both the files with the package in our project folder, we will see the following result.

accessing child method from the parent