Livewire 에서 이벤트 발생 시키기
$this->dispatch();
Livewire 컴포넌트에서 이벤트를 발생시키는 방법이다.
Livewire -> Livewire, Alpine.js, JS
// Livewire Component
$this->dispatch('modal-open');
// 이벤트 받기
#[On('modal-open')]
public function handlePostCreated(): void
{
// 이 컴포넌트에서만 실행됨
// 예: 폼 초기화, 상태 리셋
$this->reset();
}
//Alpine.js 에서 받기
<div
x-data="{ open: false }"
@modal-open.window="open = true"
>
<div x-show="open">모달</div>
</div>
$this->dispatch(); 함수는 Livewire 또는 Alpine.js 로 송신할 수 있는데,
Livewire 에서는 #On[이벤트명] 으로 받고, Alpine.js 에서는 @이벤트명 으로 수신한다.
Livewire 컴포넌트에서 단순하게 DOM 이벤트로 보낼려면
$this->dispatchBrowserEvent('modal-open');
-> Alpine, Vanilla JS, 다른 프레임워크도 수신 가능한 방식이다.
- Livewire 함수에 #[On('post-created')] 속성을 추가하면 이벤트 발생시 함수가 실행된다.
- 단점은 같은 이름으로 이벤트 속성을 다른 함수에 추가하면 함수가 실행되는데, 유지 보수시에 파악하기가 힘들다.
- 따라서 이벤트 송시시 스코프를 추가해야 의도를 정확히 파악할 수 있다.
$this->dispatch('modal-open')->self();
$this->dispatch('modal-open')->to();
Livewire 송신을 Alpine.js 와 Javascript 에서 받는 방법
Alpine.js 에서 수신방법
<div
x-data="{ show: false }"
@post-created.window="show = true"
>
<div x-show="show">
저장되었습니다.
</div>
</div>
Vanilla JS 에서 Livewire.on 을 사용한다.
<script>
Livewire.on('post-created', (payload) => {
console.log(payload)
})
</script>
물론 Livewire.on() 함수를 Alpine.js 에서도 사용 가능하다.
다른 방식으로 Alpine.js 에서 스코프를 한정할 수 있는 @this.on() 방식도 있다. (현재 Livewire 컴포넌트 전용 수신방법)
지금까지는 Livewire 에서 송신하는 방법과 그걸 받는 Alpine.js, Vanilla JS 수신방법이다.
실무 기준 선택 가이드
- UI 반응만 필요 → dispatchBrowserEvent
- 특정 Livewire 컴포넌트만 반응 → @this.on, $wire.on
- 전역 JS 연동 → Livewire.on
Alpine.js 와 Vanilla JS 에서 Livewire 이벤트 송신 방법
Alpine.js 에서는 매직 키워드 $wire.dispatch() 를 사용한다.
<div x-data>
<button
@click="$wire.dispatch('refresh-list', { page: 1 })"
>
목록 새로고침
</button>
</div>
Vanilla JS 에서는 Livewire.dispatch(); 를 사용한다.
<script>
Livewire.dispatch('post-created', { id: 1 })
</script>
[참고]
Alpine.js 에서 이벤트 송수신 방법
$dispatch()
Alpine.js -> Alpine.js, js, dom
<div x-data>
<button @click="$dispatch('post-created', { id: 123 })">
이벤트 송신
</button>
</div>
동일 코드에서 수신
<div x-data @post-created="console.log($event.detail)"></div>
전역 수신
<div x-data @post-created.window="console.log($event.detail)"></div>
$wire.dispatch()
Alpine.js -> Livewire
<div x-data>
<button
@click="$wire.dispatch('refresh-list', { page: 1 })"
>
목록 새로고침
</button>
</div>
use Livewire\Attributes\On;
#[On('refresh-list')]
public function refreshList($page = 1): void
{
// $page 활용
}
window.dispatchEvent()
Alpine.js -> JS (순수 DOM 이벤트)
<button
x-data
@click="window.dispatchEvent(new CustomEvent('ui:toast', { detail: { message: '저장 완료' } }))"
>
Toast
</button>
window.addEventListener('ui:toast', (e) => {
console.log(e.detail.message)
})
JS 에서 Livewire 송수신 방법
JS -> Livewire (송신)
Livewire.dispatch()
Livewire.dispatchTo()
<script>
// JS → 모든 Livewire 컴포넌트로 이벤트 송신
Livewire.dispatch('post-created', {
postId: 10,
title: 'Hello Livewire'
})
</script>
<script>
// 특정 컴포넌트 이름으로 타겟팅
Livewire.dispatchTo(
'post-list', // Livewire 컴포넌트 이름 (케밥 케이스)
'post-created',
{ postId: 20 }
)
</script>
use Livewire\Component;
use Livewire\Attributes\On;
class PostList extends Component
{
#[On('post-created')]
public function handlePostCreated($postId, $title): void
{
// JS에서 보낸 payload 수신
// $postId === 10
// $title === 'Hello Livewire'
}
public function render()
{
return view('livewire.post-list');
}
}
JS (수신)
Livewire.on()
<script>
Livewire.on('post-created', (payload) => {
console.log('JS 수신:', payload.postId)
})
</script>
'Laravel > Livewire' 카테고리의 다른 글
| Livewire 이벤트 수신시 매개변수($payload) 전달방법에 대해서 (0) | 2025.12.28 |
|---|---|
| Laravel Livewire + Alpine.js 이벤트 통신 완전 정리 (0) | 2025.10.12 |
| Livewire.dispatch 데이타 전달하기 (0) | 2025.10.12 |
| Livewire3와 Alpinejs 상호작용에 대해서. (0) | 2023.12.14 |