Question

我有一系列深入几个层次的组件。每个组件都有自己的数据，它通过AJAX加载并用于呈现子组件的每个实例。 days父模板，例如：

<template>
    <accordion :one-at-atime="true" type="info">
        <panel :is-open="index === 0" type="primary" :header="'Day ' + day.day" v-for="(day, index) in days" :key="day.id">
            <br/>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">Cycles</h3>
                </div>
                <div class="panel-body">
                        <cycles
                            :day="day"
                        >
                        </cycles>
                </div>
            </div>
        </panel>
    </accordion>
</template>

cycles子模板，例如：

<template>
    <accordion :one-at-atime="true" type="info">
        <panel :is-open="index === 0" type="primary" :header="'Week ' + cycle.week + ': ' + cycle.name" v-for="(cycle, index) in cycles" :key="cycle.id">
            <form v-on:submit.prevent="update">
                ....misc input fields here...
<button type="button" class="btn btn-warning" v-if="cycle.id" v-on:click="destroy">Delete</button>
            </form>
        </panel>
    </accordion>
</template>

<script>
    export default {
        props: [
            'day'
        ],
        data() {
            return {
                cycles: []
            }
        },
        beforeMount: function () {
            var self = this;

            if (this.cycles.length === 0) {
                axios.get('/plans/days/' + this.day.id + '/cycles')
                    .then(function (response) {
                        self.cycles = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        methods: {
            destroy: function (event) {
                var self = this;

                axios.delete('/plans/cycles/' + event.target.elements.id.value)
                    .then(function (response) {
                        self.cycles.filter(function (model) {
                            return model.id !== response.data.model.id;
                        });
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    }
</script>

然后，每个cycles组件在v-for循环中呈现另一个组件，这将呈现另一种类型的组件，依此类推。创建的是树状组件结构。

当我需要向服务器发送一个通用请求然后更新它所调用的组件中的数据时，我不想在每个组件中复制该请求方法。我宁愿在根Vue实例上只有一个方法实例。

例如，这是首选：

const app = new Vue({
    el: '#app',
    store,
    created: function () {
        this.$on('destroy', function (event, type, model, model_id, parent_id) {
            this.destroy(event, type, model, model_id, parent_id);
        })
    },
    methods: {
        destroy: function (event, type, model, model_id, parent_id) {
            var self = this;

            axios.delete('/plans/' + type + '/' + model_id)
                .then(function (response) {
                    model = model.filter(function (model) {
                        return model.id !== response.data.model.id;
                    });

                    this.$emit('modified-' + type + '-' + parent_id, model);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
});

然后在cycles.vue删除按钮中点击此处调用：

<button type="button" class="btn btn-warning" v-if="cycle.id" v-on:click="$root.$emit('destroy', event, 'cycles', cycles, cycle.id, day.id)">Delete</button>

并将其添加到cycles.vue个事件：

    created: function () {
        this.$on('modified-cycles-' + this.day.id, function (cycles) {
            this.cycles = cycles;
        })
    },

但是，这不起作用，因为子元素永远不会从root获取发出的'modified-' + type + '-' + parent_id事件。

我也试过了this.$children.$emit('modified-' + type + '-' + parent_id, model);，但这也不起作用。

什么是Vue 2.5.16这样做的方法？是否有比我目前使用的更好的设计模式？

Answer 1

每个Vue实例（root和children）都是一个独立的事件中心。

您$ $在实例上发出事件，您可以在同一个实例上使用$ on 订阅事件通知。

您可以使用this.$root.$on()和this.$root.$emit()将根实例用作事件总线并实现您的目的。

然而，我不太清楚你想要分开的关注点，所以我还没准备好提供更好的建议。

Vue根和任何子组件之间的通信

1 个答案: