Question

vuejs-2.5.13
Laravel Framework 5.4.36
MacOS10.13.3

这是我的 event-bus.js

m   = (yB-yA)/(xB-xA)

在 mediaSelectButton.js

中创建的事件

import Vue from 'vue';

export const EventBus = new Vue();

此事件侦听 table.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>

问题：事件选定媒体中的数据使用已创建哈克未来

但是，如果我在 beforeRouteEnter

中收听该事件

示例：

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

这一切都在必要时起作用。请告诉我这里的错误在哪里，我把它固定在huck 创建。

Answer 1

不确定这是否有效但请试试。

由于它适用于beforeRouteEnter但不适用于created挂钩，我认为原因是发出事件时，table.js component尚未创建

使用nextTick可以解决问题。

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

更新后的vuejs - 停止收听事件

1 个答案: