Vue communcation between child to parent to another child

I got a <payment-child-component> which handles all the subscriptions and payments, i also have

another <check-active-child-component>

I want these two components to communicate. persay in the <payment-component> a user cancel’s his subscription i want to fire a method i have in <check-active-component> which called checkActive()

So from payment-component emits to parent-component when the subscription cancel method is triggered and then fires the checkActive() method inside check-active-component

So if my logic is good, the exact question is: how do i fire a method from parent to child component?

Answer

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>

Advertisement

Answer