How to call method from another component VUE - vue.js

Question

I have one component
<template>
<div class="section">
<a v-if='type == "events"' class="button is-primary" #click="showForm()">
<i class="fa fa-calendar"></i> &nbsp<span class="card-stats-key"> Add Event</span>
</a>
<a v-if='type == "places"' class="button is-primary" #click="showForm()">
<i class="fa fa-location-arrow"></i> &nbsp<span class="card-stats-key"> Add Place</span>
</a>
<table class="table" v-if="!add">
<thead>
<tr>
<th>
<abbr title="Position"># Client Number</abbr>
</th>
<th>Title</th>
<th>
<abbr title="Played">Status</abbr>
</th>
<th>
<abbr title="Played">View</abbr>
</th>
</tr>
</thead>
<tbody>
<tr v-for="event in events">
<th>{{event.client_number}}</th>
<td v-if='type == "events" '>{{event.title}}</td>
<td v-if='type == "places" '>{{event.name}}</td>
<td>
<p class="is-danger">Waiting</p>
</td>
<td> View </td>
</tr>
</tbody>
</table>
<add v-if="add" v-on:hideAdd="hideFrom()"></add>
</div>
</template>
<script>
import Add from '../forms/AddPlace.vue'
export default {
name: 'Tabbox',
data() {
return {
events: [],
add: ''
}
},
props: ['type'],
created() {
let jwt = localStorage.getItem('id_token')
var ref = wilddog.sync().ref('users').child(jwt).child(this.type);
ref.once("value")
.then((snapshot) => {
this.events = snapshot.val();
}).catch((err) => {
console.error(err);
})
},
methods: {
showForm(add) {
if (this.add == true)
this.add = false;
else {
this.add = true;
}
},
hideFrom() {
this.add = false
console.log('This add is false');
}
},
components: {
Add
}
}
</script>
and another component
<template>
<div class="field is-horizontal">
<div class="field-label">
<!-- Left empty for spacing -->
</div>
<div class="field-body">
<div class="field">
<div class="control">
<button class="button is-primary" v-bind:class="{ 'is-loading': loading } " #click="addPlace()">
Add place
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
add: false
}
},
methods: {
addPlace() {
this.$emit('hideAdd', this.add)
},
},
}
</script>
How i can calling method from showForm() from first first component in second one! I'm trying to that with $emit function, it doesn't work. And trying with $broadcast, same. How i can use event there?

Answer 1

Add a ref attribute to the child component in the parent component's template like this:
<add v-if="add" v-on:hideAdd="hideFrom()" ref="add-component"></add>
Now your parent component will have access to the child component's VueComponent instance and methods, which you can access like this:
methods: {
showForm() {
this.$refs['add-component'].addPlace();
}
}
Here's documentation on refs.