Level 28
I think that will help you. https://laracasts.com/series/blade-component-cookbook
2 likes
Sep 2, 2021
8
Level 63
Component vs blade @include vs Livewire
I discover the news in Laravel 8 like the components.
I have some difficulty to understand the real utility of the components, perhaps because I already use Livewire.
I feel that it's not possible to use a component to have a similar behavior as in a Livewire component, for example by writing a select / option component with the correct id returned to the form.
I have identified three different ways to add some "component" in a view :
@include('my.component')
<x-my-component/>
@livewire('my-component')
But I still think that Livewire helps to solve many difficulties generated by a simple blade component.
What about your opinion on this subject ?
Thanks for your help to better understand this.
Vincent
Level 63
Thank you @shaungbhone
Level 104
Livewire if you want a live component (i.e. makes XHR requests to the server to perform actions/make changes to state); otherwise, for a (familiar) HTML-like experience, use Blade Components.
1 like
Level 63
Than you @tykus.
If I understand what you tell me, a simple blade component is only for displaying datas and would not be relevant to display a select / option field in a form, considering that this field needs to update the option value when any option is selected.
I don't really need to perform actions / changes to the state, but the Livewire wire:model is all the same interesting.
Level 104
Not exactly, you can have a Blade Component which wraps a form input that will ultimately be submitted as a traditional POST request; however, if you were implement say a dependent dropdown (where the second select element's options are derived from whatever was selected in the first select element); a live component would be able to update it's options (from the server) dynamically. Do you see the difference?
1 like
Level 63
Yes I understand, that's like cascading select fields.
So if I only want to use a simple select field to select any option, a simple blade component is enough.
But if I want to have a button close to the select field to add a new option via a modal window, and then refresh my select field and automatically select the new added option, a Livewire component will do the job very well.
Thank you @tykus.
Level 51
This is interesting… in short from your lens,
-
@include with have access to any props on the page.
-
<x-component…> don't have access to props on the page. you can pass them in. But it actually creates some limitations but it’s the new way and there are other benefits to these components.
-
Livewire components. I wouldn’t necessarily put in the same category as the first two. I mean yes, you can use them In a component way but I wouldn’t look at them as parts, first. That said, It is advisable to use the first two inside a livewire component. I see some examples of how to use livewire, including here that break up the page into separate livewire components unnecessarily. Particularly when they must share data heavily across other components. But this is a whole separate topic. Livewire components as others have responded are reactive and securely get data from the server. I would say this is their main feature.
2 likes
Level 63
Thank you @webrobert for sharing your opinion ;). What other benefits to the blade components do you think about ? I have read (and tested) that theses components could be successful to define some graphical unit for the entire website, for example you have to define the style only once and then using always the component displays always the same style.
Please or to participate in this conversation.