# Livewire Component

 1class ShowPosts extends Component
 2{
 3    publuc $postCount;
 4 
 5    protected $listeners = ['postAdded'=> 'incrementPostCount'];
 6 
 7    public funciton incrementPostCount()
 8    {
 9        $this->postCount = Post::count();
10    }
11}

1$emit 는 $listeners 로 연결해야 작동한다.

1$emit()
2$emitTo()
3$emitSelf()

# livewire Component

1$this->emit('postAdded');

# Blade Templete

1<button wire:click="$emit('postAdded')"></button>

# Javascript

1<script>
2    Livewire.emit('postAdded');
3 
4    Livewire.on('postAdded' postId => {
5        alert('A post was added with the id of:' + postId);
6    })
7</script>

# Alpine.js

1<button x-data="{}"
2x-on:click="window.livewire.emitTo('test.contact-modal', 'show')">Show contact modal</button>
3 
4<button x-data="{}"
5x-on:click="livewire.emitTo('test.contact-modal', 'show')">Show contact modal</button>

# livewire Component

1$this->dispatchBrowserEvent('name-updated', ['newName'=> $value]);

# livewire Component

1<script>
2    window.addEventListener('name-updated', event => {
3        alert('Name updated at:' + event.detail.newName);
4    })
5</script>

# Alpine.js 에서 이벤트 캡쳐하기 (name-update 이벤트가 발생하며 open = false 과 되는 것인가?)

1<div x-data="{open : false }" @name-updated.window="open : false">
2    <!-- Modal with a Livewire name update form -->
3</div>