Наблюдайте за некоторым событием из другого компонента в Vue

Question

У меня есть два компонента:

<div>
    <advertiser-add-component></advertiser-add-component>
    <advertisers-component></advertisers-component>
</div>

Эти компоненты имеют следующий интерфейс:

Первый компонент - кнопка.Я увижу модальное диалоговое окно, когда я нажму на него.Модал содержит форму Ajax:

Вторым компонентом является таблица.Вы уже видели это на первом изображении. Итак, я хотел бы переставить компонент таблицы после отправки формы без обновления страницы.Есть ли какой-нибудь способ «подписаться» на это событие (после отправки модальной информации) от компонента рекламодателей?Как я могу организовать это с минимальным кодом?

Answer 1

Я использую пакет vue-events: https://github.com/cklmercer/vue-events

• Установите пакет глобально

• Добавьте объект событий в свой компонент с событиями для прослушивания и запуститесобытие из модального ряда, проверьте этот пример:

  

Answer 2

Я бы посоветовал вам проверить это: https://vuejs.org/v2/guide/state-management.html

В основном у вас есть компонент (или класс Java), называемый хранилищем, в котором хранятся данные таблицы.Эти данные отображаются в таблице.Когда вы отправляете модальное сообщение, вы просите магазин снова извлечь данные (отправив событие) из вашего бэкэнда, где я предполагаю, что данные хранятся.

Так как таблица отображает данные магазина уже, таблицаобновится автоматически.

Я сделал это в моем приложении здесь: https://github.com/Draluy/Jobsearch/blob/master/front/src/components/applications/Application.vue

Answer 3

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

<wrap-component> <!-- This component contains the data and handles the ajax request -->
   <advertiser-add-component @click-triggered="ajaxRequest"></advertiser-add-component> <!-- This components emits a click event to the <wrap-component>-component that executes the ajax requests -->
   <advertisers-component :tableData="tableData"></advertisers-component> <!-- This component is passed the data via the tableData prop -->
</wrap-component>

<!-- Inside "wrap-component" -->
data() {
  return {
    tableData: []
  }
},
methods: {
  ajaxRequest() {
   // make the data request here and replace this.tableData with the response data
  }
}

<!-- Inside "advertiser-add-component" -->
methods: {
  // Execute this function, when the button is clicked
  add() {
    this.$emit('click-triggered');
  }
}

<!-- Inside "advertisers-component" -->
props: {
   tableData: {
      type: Array // if the data is an array of course..
   }
}

Answer 4

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

Вотхороший пример того, как это сделать:

https://alligator.io/vuejs/global-event-bus/