Question

我有这样的结构

Parent.vue-> Child.vue

如果父级是在路由上被调用的组件，或者简称为父级，则父级是页面本身，而子级是该父级的组件。我还有一个名为EventBus的事件总线。

import Vue from 'vue';

export const EventBus = new Vue();

在我的孩子上，我有以下代码：

<input type="text @change="valueChange" name="Test" />

哪些将在VueJS方法钩子上处理：

methods: {
    valueChange() {
        EventBus.$emit('testEvent');
    }
},

现在我在父母身边，这是我的代码：

methods: {
    invokeValidationEvent() {
        console.log('test');
    },
}

created() {
    EventBus.$on('testEvent', this.invokeValidationEvent);
}

所以这是用例。例如，我在文本框中键入内容，它运行一次console.log('test')，这是理想行为，对吧？好的，让我们说移动到另一个“页面”，然后返回到再次调用父对象的页面，然后再次在文本框中键入内容，console.log('test')被多次调用，如果相同则增加调用次数过程一遍又一遍地完成。有没有一种方法可以避免不使用$once的问题，因为在我的parent.vue上，它可能会说一组执行相同操作的相同组件，因此$once将停止调用第一次调用后第二次。

注意：此代码只是缩短了。但是你明白了。我想要这种结构的计划是，我有一个父级，即“主窗体”，这些组件充当了我需要填写的字段，这就是为什么每个组件都需要调用同一事件的原因（在这种情况下 testEvent ”）可以多次调用，但避免在我离开父页面并返回到该页面并再次执行该过程时便不必崩溃。

我也在父级组件上尝试过此操作。

watch: {
    $route(to) {
        if (to.name !== this.$route.name) {
            EventBus.off('testEvent', this.invokeValidationEvent);
        }
    }
}

但是它似乎不起作用。此问题的解决方法是什么？

Answer 1

我明白了，在我的父组件上放置了一个名为beforeRouteLeave的警卫

beforeRouteLeave(to, from, next) {
    EventBus.$off('assignStudentStepValidation', this.invokeValidationEvent);
    next();
}

Presto问题已解决！

VueJS事件$ on出现问题-多次运行

1 个答案: