Question

我有一个组件

2014-10-04T16:00:00Z - 2015-04-04T16:00:00Z: +11 AEDT
2015-04-04T16:00:00Z - 2015-10-03T16:00:00Z: +10 AEST
2015-10-03T16:00:00Z - 2016-04-02T16:00:00Z: +11 AEDT
2016-04-02T16:00:00Z - 2016-10-01T16:00:00Z: +10 AEST
2016-10-01T16:00:00Z - 2017-04-01T16:00:00Z: +11 AEDT
2017-04-01T16:00:00Z - 2017-09-30T16:00:00Z: +10 AEST
2017-09-30T16:00:00Z - 2018-03-31T16:00:00Z: +11 AEDT
2018-03-31T16:00:00Z - 2018-10-06T16:00:00Z: +10 AEST
2018-10-06T16:00:00Z - 2019-04-06T16:00:00Z: +11 AEDT
2019-04-06T16:00:00Z - 2019-10-05T16:00:00Z: +10 AEST
2019-10-05T16:00:00Z - 2020-04-04T16:00:00Z: +11 AEDT

和另一个组件

<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>

我如何从第二个第一个组件中调用showForm（）方法！我正在尝试使用$ emit函数，它不起作用。和$ broadcast一样尝试。我怎么能在那里使用活动？

Answer 1

在父组件的模板中向子组件添加ref属性，如下所示：

<add v-if="add" v-on:hideAdd="hideFrom()" ref="add-component"></add>

现在，您的父组件可以访问子组件的VueComponent实例和方法，您可以像这样访问：

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

Here's documentation on refs.

如何从另一个组件VUE调用方法

1 个答案: