vue.js - vuejs - 如何防止组件响应全局事件

Question

我有一个从选择框更改触发的全局事件。

我有组件 A 响应事件并重定向。

我有组件 B，它也响应事件并重定向。

我有组件 C 响应事件并加载一些数据。

一次只有一个组件在其自己的“页面”（路由）上可见。选择框位于所有页面上。

发生的事情是我选择了一个选项，所有组件 AB 和 C 都在响应，导致重定向斗争和完全歇斯底里。

我希望当组件 C 显示时，组件 A 和 B 不会显示，因此不会响应事件。

我错过了什么？我尝试了许多 , , 的组合 ，但v-if这些未“加载”的组件仍在响应事件......Mounted()Ready()beforeDestroy()

这是一些代码：

1）注册事件（在main.js中） window.EventBus = new Vue();

2）在更改选择选项时添加事件： EventBus.$emit('studentSelectLoaded')

3）在组件中捕获事件：

EventBus.$on('studentSelectedEvent', function(){
        gd();})

我做了什么让它工作：

1）我在数据中有一个 dataReady 属性：

data() {
            return {
                data: {},
                dataReady: false,
                loading: false,
                searchableTable: null,
                route: 'coursework_list'

            }
        },

2）在销毁之前，我将数据准备好设置为假：

beforeDestroy(){
            this.dataReady = false;
         },

3）添加对事件侦听器的检查：

EventBus.$on('studentSelectedEvent', function(){
                if(self.dataReady){
                    gd();

                }
            })

我将组件注册为通过路由加载的页面的子级，因此当页面未加载时，我希望组件未加载。

这是一个页面：

<template>
    <div class="components">
        <zzi-courseworklist></zzi-courseworklist>
    </div>
</template>
<script>
import zzicourseworklist from "../../components/studentParent/CourseWorkList/CourseWorkList"
export default{
    components:{
        'zzi-courseworklist': zzicourseworklist 
    }

}
</script>

还有什么想法吗？

标签： vue.js