[Vuejs]-Vue communcation between child to parent to another child

by

0👍

✅

To call a method of a child component from its parent, you can use ref. Here is an example:

Child Component:

export default {
  name: "ChildComponent",
  methods: {
    childMethod(){
      console.log("hello from child");
    }
  }
};

Parent Component:

<template>
  <div id="app">
    <ChildComponent ref="myChild"/>
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent";

export default {
  name: "App",
  components: {
    ChildComponent
  },
  mounted(){
    this.$refs.myChild.childMethod()
  }
};
</script>

0👍

This one is what I am using on my app.

Parent.vue

<template>
    <a @click="run">Click me to execute method from child</a>
</template>
<script>
    export default {
        name:"parent",
        methods: {
            run() {
              this.$root.$refs.child.methodtoexecute();
            }
         }
     }
</script>

Child.vue

<script>
   export default {
     name:"child",
     created() {
        this.$root.$refs.child = this;
     },
     methods: {
        methodtoexecute() {
          alert("hello from child");
        }
     }
   }
</script>

Leave a comment