javascript - 更新 vuejs 后 - 停止监听事件

Question

• vuejs-2.5.13
• Laravel 框架 5.4.36
• MacOS10.13.3

这是我的 event-bus.js

import Vue from 'vue';

export const EventBus = new Vue();

在 mediaSelectButton.js 中创建的事件

<template>
    <router-link :to="'/' + name + '/criterias'" v-on:click.native="selected" class="btn btn-success btn-md col-xs-12">
        Выбрать
    </router-link>
</template>
<script>

    import { EventBus } from '../../additional/event-bus.js';

    export default {
        props: {
            name: {
                type: String,
                required: true
            },

            media: {
                type: String,
                required: true
            },

            countLikes: {
                type: Number,
                required: true
            },

            countComments: {
                type: Number,
                required: true
            },

            text: {
                type: String
            },

            hashTags: {
                type: Array
            }

        },
        data: ()=>  {
            return {
            }
        },
        methods: {
            selected:  function () {
                const result = {
                    media: this.media,
                    socialName: this.name,
                    text: this.text,
                    hashTags: this.hashTags,
                    countLikes: this.countLikes,
                    countComments: this.countComments
                };
                EventBus.$emit('selected-media', result);
            }
        }
    }
</script>

此事件监听table.js组件

<script>
    import { EventBus } from '../../additional/event-bus';

    export default {
        data: () => {
            return {
                likeIcon: require('./likeHeart.svg'),
                commentIcon: require('./comment.svg'),
                countLikes: 0,
                countComments: 0,
                selectedMedia: '',
                socialName: '',
                text: '',
                hashTags: [],
                criteriasList: [],
                pendingRequest: true,
                hashTagChecked: false
            }
        },
        beforeRouteEnter(to, from, next){
            if (/^\/\w+\/medies(\/)?$/.test(from.path) || /^\/\w+\/roulette(\/)?$/.test(from.path)) {

                next();
            } else {
                next('/');
            }
        },

        methods: {
            goBack() {
                this.$route.meta.navBack = true;
                window.history.length > 1
                        ? this.$router.go(-1)
                        : this.$router.push('/')
            },
            criterias(data) {
                axios.post('/api/table/get', {
                    social: data
                })
                        .then(response => {
                            this.pendingRequest = false;
                            this.criteriasList = response.data;
                        })
                        .catch(e => {
                            this.$router.push('/');
                        });
            }
        },
        created: () => {
            EventBus.$on('selected-media', result => {
                console.log(result) // <-- fail here!
                this.selectedMedia = data.media;
                this.socialName = data.socialName;
                this.text = data.text;
                this.hashTags = data.hashTags;
                this.countLikes = data.countLikes;
                this.countComments = data.countComments;
                this.criterias(this.socialName);
            })
        }
    }
</script>

问题 selected-media uses created 事件中的数据没有出现

但是，如果我在 beforeRouteEnter

中收听事件

示例:

beforeRouteEnter(to, from, next){
            if (/^\/\w+\/medies(\/)?$/.test(from.path) || /^\/\w+\/roulette(\/)?$/.test(from.path)) {
                EventBus.$on('selected-media', result => {
                    console.log(result); // <--- It's work!

                });
                next();
            } else {
                next('/');
            }
        },

一切正常，因为它是必要的。请告诉我这里的错误在哪里，我希望它能在 huck created 中工作。

Answer 1

不确定这是否可行，但让我们试试吧。

因为它在 beforeRouteEnter 中起作用，但在 created 钩子(Hook)中不起作用，我认为原因是 当事件发出时，table.js 组件 尚未创建。

使用 nextTick应该可以解决问题。

this.$nextTick(() => {
    EventBus.$emit('selected-media', result);
});