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

i have 1 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><a href="#"> view </a></td>                 </tr>             </tbody>         </table>         <add v-if="add" v-on:hideadd="hidefrom()"></add>     </div> </template> <script> import add '../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 false');         }     },     components: {         add     } } </script> 

and component

    <template>    <div class="field is-horizontal">   <div class="field-label">     <!-- left empty 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 can calling method showform() first first component in second one! i'm trying $emit function, doesn't work. , trying $broadcast, same. how can use event there?

add ref attribute child component in parent component's template this:

<add v-if="add" v-on:hideadd="hidefrom()" ref="add-component"></add> 

now parent component have access child component's vuecomponent instance , methods, can access this:

methods: {   showform() {     this.$refs['add-component'].addplace();   } } 

here's documentation on refs.