Как правильно передать данные от дочернего к родительскому компоненту, используя шину событий? - PullRequest
Новая
       11

Как правильно передать данные от дочернего к родительскому компоненту, используя шину событий?

0 голосов
/ 02 июля 2019

Я использую степпер и пытаюсь перейти к следующему шагу с помощью нажатия кнопки (сам степпер является автономным родительским компонентом (просмотр), вот ссылка на указанный степпер: https://vuetifyjs.com/en/components/steppers#stepper). Однако, используя пример, указанный в ссылке выше, я переместил кнопку, которая переводит вас к следующему шагу в дочернем компоненте (таблице), и я пытаюсь вызвать событие, которое выполняет пошаговое выполнение, через шину событий.

Шаги, которые я предпринял до сих пор:

  1. Я создал файл event-bus.js и заполнил его: 

    import Vue from "vue";
export const EventBus = new Vue();

    и я импортировал его как в родительский (шаговый), так и в дочерний компоненты (таблица с кнопкой в ​​нем)

  2. Я импортировал дочерний компонент в родительский.

  3. Вот как выглядит установка EventBus в моем дочернем компоненте: 

    <v-btn
   color="#009af9"
   large
   dark
   @click="stepperPageOne()">Next</v-btn>

data: () => ({
    e1: 0
}),
methods: {
   stepperPageOne() {
       EventBus.$emit("changePage", this.e1++);
       console.log(this.e1);
   }
}

  4. Вот как это выглядит в родительском компоненте: 

    <v-stepper-step :complete="e1 > stepperCatcher()" step="1" color="#68C977">Schedule
</v-stepper-step>

data: () => ({
   e1: 0
}) ,
methods: {
    stepperCatcher() {
        EventBus.$on("changePage");
        console.log("changePage");
    }
}

Когда я нажимаю кнопку в дочернем компоненте, происходит событие, связанное с ним(Я зарегистрировал это), но степпер не меняет шаги.

Когда я обновляю представление, в котором находится степпер, событие, связанное с ним, должно перехватываться, когда я нажимаю кнопку вэто дочерний компонент сразу запускается дважды.

Может кто-нибудь помочь мне, как добиться желаемого эффекта?

1 Ответ

1 голос
/ 03 июля 2019

Я не совсем понимаю цель этого: 

:complete="e1 > stepperCatcher()"

и это: 

stepperCatcher() {
  EventBus.$on("changePage");
  console.log("changePage");
}

stepperCatcher() ничего не возвращает, поэтому условие e1 > stepperCatcher()бессмысленный.

Вы отправляете событие правильно, но не слушаете его правильно.

Вам необходимо зарегистрировать прослушиватель события для события в хуке created вашего родительского компонентаи затем отмените регистрацию слушателя в хуке destroyed.Примерно так: 

created() {
  EventBus.$on('changePage', this.handleChangePage)
},

destroyed() {
  EventBus.$off('changePage', this.handleChangePage)
},

methods: {
  handleChangePage(e1) {
    // Handle the event here
  }
}

См. Документы для $on.

...