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?
Advertisement
Answer
To call a method of a child component from its parent, you can use ref
. Here is an example:
Child Component:
JavaScript
x
9
1
export default {
2
name: "ChildComponent",
3
methods: {
4
childMethod(){
5
console.log("hello from child");
6
}
7
}
8
};
9
Parent Component:
JavaScript
1
20
20
1
<template>
2
<div id="app">
3
<ChildComponent ref="myChild"/>
4
</div>
5
</template>
6
7
<script>
8
import ChildComponent from "./components/ChildComponent";
9
10
export default {
11
name: "App",
12
components: {
13
ChildComponent
14
},
15
mounted(){
16
this.$refs.myChild.childMethod()
17
}
18
};
19
</script>
20