$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.

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

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

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>

Отправить