时间戳

首页 > 解决方案 > VueJS 事件 $on 的问题 - 多次运行

javascript - VueJS 事件 $on 的问题 - 多次运行

问题描述

我有这样的结构

Parent.vue -> Child.vue

parent 是在路由上调用的组件，或者简称为，父级是页面本身，子级是该父级的组件。我还有一个名为 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);
        }
    }
}

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

标签： javascriptecmascript-6vuejs2

解决方案

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

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

Presto问题解决了！

推荐阅读