Ошибка при включенном событии $ VueJS более одного раза

Question

У меня есть такая структура

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);
        }
    }
}

Но, похоже, это не работает. Как обойти эту проблему?

Answer 1

Я получил его, на своем родительском компоненте я установил защиту под названием beforeRouteLeave

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

Проблема Presto решена!