Передача событий от компонентов к просмотру маршрутизатора - неприятный запах кода - PullRequest
Новая
       7

Передача событий от компонентов к просмотру маршрутизатора - неприятный запах кода

0 голосов
/ 26 августа 2018

Я экспериментирую с Vue Router, и у меня появляется неприятный запах. Необходимо узнать в сообществе, правильно ли я поступаю.

До Vue Router у меня был родительский компонент, получавший событие от своего потомка и обновляющий свойство данных моего основного приложения:

<number-pad v-on:button-click="updateTotal($event)"></number-pad>

Не беспокойтесь о деталях, но это работало.

Когда я перенесу это в Vue Router, оно будет выглядеть примерно так ... 

const pageOne = {
    name: "page-one",
    template: `
    <div>
        <number-pad v-on:button-click="updateTotal($event)"></number-pad>
    </div>  `
};

... со следующим в моем HTML: 

<router-view></router-view>

Я намного больше ухожу, но вы понимаете суть.

В любом случае, это, конечно, будет прекрасно отображаться и обновлять внутренние компоненты компонента, но директива больше не будет взаимодействовать с основным свойством данных, если я не настрою некоторый код для вывода данных еще на один уровень к компоненту <router-view>: 

<router-view v-on:button-click="updateTotal($event)"></router-view>

Теперь это будет работать (наряду с другими настройками кода я не пишу ради краткости).

Другими словами, когда дело доходит до отношений компонентов, я перешел от родителя -> дочерних отношений до Vue Router к дедушке -> родителю -> дочерним отношениям после.

Должен ли я серьезно дублировать все мои привязки и директивы этому новому прародителю <router-view>, чтобы связываться с основным свойством данных?

Это пахнет очень плохо для меня, а также является огромной болью в а **.

Что я могу сделать, чтобы улучшить ситуацию? Есть ответ: Vuex! Или ответ: нет, вы допинг, вы упустили что-то простое.

Спасибо.

1 Ответ

0 голосов
/ 26 августа 2018

Vuex является одним из ответов, но вы также можете определить шину событий, например:

/ src / event-bus.js 

import Vue from 'vue'
export const EventBus = new Vue()

Импортируйте его в компонент, который излучает: 

import EventBus from '@/event-bus'

Вы бы отправили событие, подобное этому: 

EventBus.$emit('button-click', payload)

Теперь импортируйте EventBus в компонент, который получает событие, и добавьте прослушиватель вваш установленный крюк: 

mounted() {
  EventBus.$on('button-click', payload => {
    // handle event
  })
}

Это работает для всего приложения.

...