孩子与父母之间的 Vue 交流

Question

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 1

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>

Answer 2

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>