Атрибут On
Атрибут On является PHP-атрибутом (аннотацией),
который вешается на метод компонента Livewire.
В значение передаётся имя события, на которое метод должен реагировать.
Когда событие будет отправлено через глобальный диспетчер событий Livewire,
метод будет автоматически вызван.
Синтаксис
Атрибут применяется к публичному методу и принимает один обязательный параметр - строку с именем события:
<?php
use Livewire\Attributes\On;
class SomeComponent extends Component
{
#[On('event-name')]
public function handleEvent()
{
// действие
}
}
?>
Пример
Пусть у нас есть два компонента: Sender и Receiver.
Компонент Sender отправляет событие update,
а компонент Receiver слушает его с помощью атрибута On:
<?php
namespace App\Livewire;
use Livewire\Component;
class Sender extends Component
{
public function send()
{
$this->dispatch('update');
}
public function render()
{
return view('livewire.sender');
}
}
?>
<button wire:click="send">
Send event
</button>
<?php
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\On;
class Receiver extends Component
{
public $num = 0;
#[On('update')]
public function inc()
{
$this->num++;
}
public function render()
{
return view('livewire.receiver');
}
}
?>
<div>
<span>{{ $num }}</span>
</div>
Результат выполнения кода:
<div>
<button>Send event</button>
<div>
<span>1</span>
</div>
</div>
Пример
В метод можно передать данные из события.
Для этого вторым параметром в dispatch передаётся массив данных,
а в методе-обработчике они принимаются как аргументы:
<?php
namespace App\Livewire;
use Livewire\Component;
class Sender extends Component
{
public function send()
{
$this->dispatch('update', step: 3);
}
public function render()
{
return view('livewire.sender');
}
}
?>
<?php
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\On;
class Receiver extends Component
{
public $num = 0;
#[On('update')]
public function inc($step)
{
$this->num += $step;
}
public function render()
{
return view('livewire.receiver');
}
}
?>
Результат выполнения кода:
<div>
<button>Send event</button>
<div>
<span>3</span>
</div>
</div>
