How to call method from another component VUE

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><a href="#"> View </a></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.