Communication between Alpine Components
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: