更新 vuejs 后 - 停止监听事件

Posted 2023-02-23

【中文标题】更新 vuejs 后 - 停止监听事件

【英文标题】：After the update vuejs - stopped listening to events

【发布时间】：2018-08-04 10:01:00

【问题描述】：

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 使用created huck 不来

但是，如果我在 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 中工作。

【问题讨论】：

请说得更具体一点：“更新”是什么意思？

抱歉我忘记写vuejs-2.5.13版本

【参考方案1】：

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

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

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

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

【讨论】：

太棒了！非常感谢！

你能告诉我为什么在旧版本正常工作之前（不使用$nextTick()）吗？

@MihailKuznetsov 恐怕我也不知道为什么会这样。