Skip to main content

Black Friday 2025! Only until December 1st: coupon FRIDAY25 for 40% off Yearly/Lifetime membership!

Read more here

Communication Between Components: Emit Events

Premium
2:40

The Full Lesson is Only for Premium Members

Want to access all of our courses? (29 h 46 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

V
vmutius ✓ Link copied!

Can I use events to get the validation error from the child components to the parent? I have a huge form split up in livewire components for each Model using a multistep form. But the user may type in everything or nothing in each child form (save your work for later). Validation errors should not be seen on the child component, but at the final step when the user tried to send the application. Should I do this with events or is there any other way?

PK
Povilas Korop ✓ Link copied!

I haven't tried this specific scenario, and without playing around and debugging it's hard to answer 100% correct, but I would probably save those validation errors in a session variable maybe and then show them at the end.

AA
Antonio Anerão ✓ Link copied!

I'd like to share with guys a nice thing I just tried.

We can use the window.livewire.on() method to execute a js code when an event is emitted and show, for example, a sweet alert. Something like this (under the @livewireScripts):

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
<script>
window.livewire.on('profileUpdated', function() {
Swal.fire({
title: 'Profile Updated',
text: 'You have updated your profile',
icon: 'success',
confirmButtonText: 'Cool'
})
});
</script>

You can see the code on my commit: https://github.com/antonioanerao/laravel-livewire/commit/d045f0a5d3ddf9d7069a0d8bf0829b627569401a

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.