Alpine.js components in Hyvä often communicate using events.
Dispatching events between Alpine.js components
Alpine.js makes it easy to dispatch events between components.
Here's an example of dispatching a name-changed event with data when a button is clicked:
<div x-data="">
<button @click.prevent="$dispatch('name-changed', { name: 'John Doe' })">John Doe</button>
<button @click.prevent="$dispatch('name-changed', { name: 'Jane Doe' })">Jane Doe</button>
</div>
Alpine's `$dispatch` emits native browser events, which can be listened to in several ways.
To listen to an event within an Alpine component:
<script>
function initComponent() {
return {
name: "unknown",
handleNameChange(event) {
this.name = event.detail.name
}
}
}
</script>
<div x-data="initComponent()" @name-changed.window="handleNameChange(event)">
<span x-text="`Name is: ${name}`"></span>
</div>
For components with multiple event listeners, use x-bind (or x-spread for Alpine.js v2) to define them within the component's initialization method:
<script>
function initComponent() {
return {
name: "unknown",
handleNameChange(event) {
this.name = event.detail.name
},
eventListeners: {
['@keydown.window.escape'](){
console.log('escape key was hit');
},
['@name-changed.window'](event){
this.handleNameChange(event);
}
}
}
}
</script>
<div x-data="initComponent()" x-bind="eventListeners">
<span x-text="`Name is: ${name}`"></span>
</div>
To listen for the event using native JavaScript:
window.addEventListener('name-changed', function(event) {
console.log('name changed to:', event.detail.name);
});
This method is also useful for debugging events in the browser console.
You can also trigger events from the browser console for testing: