$dispatch

$dispatch — полезное сокращение для диспетчеризации событий браузера.

<div x-data @notify="alert('Привет, мир!')">
  <button @click="$dispatch('notify')">Уведомить</button>
</div>

Уведомить

При желании вместе с отправляемым событием можно передать и данные. Эти данные будут доступны как свойство .detail события:

<div x-data @notify="alert($event.detail.message)">
  <button @click="$dispatch('notify', { message: 'Привет, мир!' })">
    Уведомить
  </button>
</div>

Уведомить

Под капотом $dispatch представляет собой обёртку для более подробного API: element.dispatchEvent(new CustomEvent(...)).

Примечание о распространении событий

Обратите внимание: из-за всплытия событий, когда вам нужно перехватывать события, отправляемые с узлов, находящихся в одной и той же иерархии вложенности, вам нужно будет использовать модификатор .window:

<!-- 🚫 Не сработает -->
<div x-data>
  <span @notify="..."></span>
  <button @click="$dispatch('notify')">Уведомить</button>
</div>

<!-- ✅ Сработает (благодаря .window) -->
<div x-data>
  <span @notify.window="..."></span>
  <button @click="$dispatch('notify')">Уведомить</button>
</div>

Осторожно

Первый пример не будет работать, потому что при отправке события notify оно будет распространяться на своего общего предка, div, а не на <span>. Второй пример будет работать, потому что одноуровневый элемент прослушивает notify на уровне window, до которого в конечном итоге всплывёт пользовательское событие.

Отправка другим компонентам

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

Пример:

<div x-data="{ title: 'Привет' }" @set-title.window="title = $event.detail">
  <h1 x-text="title"></h1>
</div>

<div x-data>
  <button @click="$dispatch('set-title', 'Привет, мир!')">Нажми меня</button>
</div>
<!-- При нажатии содержимое h1 получит текст «Привет, мир!». -->

Диспетчеризация в x-model

Вы также можете использовать $dispatch() для запуска обновления данных для привязок x-model. Например:

<div x-data="{ title: 'Привет' }">
  <span x-model="title">
    <button @click="$dispatch('input', 'Привет, мир!')">Нажми меня</button>
    <!-- После нажатия кнопки `x-model` перехватит всплывающее событие ввода и обновит заголовок. -->
  </span>
</div>

Это открывает возможности для создания пользовательских компонентов ввода, значение которых можно установить с помощью x-model.

Отменяемые события

Вы можете использовать значение, возвращаемое методом $dispatch, чтобы проверить, было ли событие отменено. Это полезно, когда нужно предотвратить стандартное поведение какого-либо действия.

<div x-data="{ open: false, canceled: false }" x-on:open.prevent>
  <button @click="canceled = !$dispatch('open'); if (!canceled) open = true">
    Нажми на меня
  </button>
  <!-- При нажатии кнопки отправляется событие,
  и содержимое будет показано только в том случае,
  если результат истинен (т. е. выполнение
  не было прервано ни одним обработчиком). -->

  <p x-show="canceled">Открытие было отменено обработчиком события.</p>

  <div x-show="open">
    <h1>Привет</h1>
  </div>
</div>

Нажми на меня

Открытие было отменено обработчиком события.

Привет

Это может пригодиться, если вы хотите предотвратить открытие или закрытие модального окна (или чего-то подобного) с помощью обработчиков событий.

Переопределение опций

Вы можете использовать третий параметр $dispatch, чтобы переопределить стандартные настройки события. Например, можно установить значение bubbles в false:

<!-- 🚫 Не сработает, так как событие прослушивается на родительском элементе -->
<div x-data="{ title: 'Привет' }" x-on:update-title="title = $event.detail">
  <p x-text="title"></p>

  <button @click="$dispatch('update-title', 'Привет, мир!', {bubbles: false})">
    Нажми на меня
  </button>
</div>

Нажми на меня

<!-- ✅ Сработает, так как событие прослушивается на том же самом элементе -->
<div x-data="{ title: 'Привет' }">
  <p x-text="title"></p>

  <button
    x-on:update-title="title = $event.detail"
    @click="$dispatch('update-title', 'Привет, мир!', {bubbles: false})"
  >
    Нажми на меня
  </button>
</div>

Нажми на меня

Это полезно, когда нужно предотвратить «всплытие» (bubbling) события к родительским элементам.

Проверка знаний

Правильный вариант использования событий в этом коде…

1. <div x-data>
     <span @notify.once="..."></span>
     <button @click="$dispatch('notify')">Уведомить</button>
   </div>

2. <div x-data>
     <span @notify="..."></span>
     <button @click="$dispatch('notify')">Уведомить</button>
   </div>

3. <div x-data>
     <span @notify.window="..."></span>
     <button @click="$dispatch('notify')">Уведомить</button>
   </div>

Отправить