Access Livewire property from child components

#1

Hi all,
I have a very simple Livewire component that just switches the currency. It doesn’t do much at the moment but it will. The Livewire component is on the top. How would I go about being able to access the property from within lower components?
-> index (contains two Livewire components)
-> items (Blade component and is inside the above file)
-> Loop through items (render item Blade component)
I can’t seem to access the Livewire property from within the lower item Blade component. Hopefully this makes sense. Any help would be great, I am sure it’s a simple problem. I am correct to assume that Livewire properties should be accessible to all child Blade components on the same page? I am using the latest Livewire version (1.x).

index
index725×329 19.9 KB
products
products1076×88 16.6 KB

I am trying to access the Livewire property $currency from within the Product component.

#2

Livewire properties should be accessible to all child Blade components on the same page

It will only accessible if the Blade component is inside Livewire component render view.
In other words, it has to be a Livewire component with Blade component included in its view to be able to access the property from the rendered component.

I’m not quite clear with how you want to work the data.
Assuming that you just want to pass the data to another component, you can try using
$this->emitTo('component_name', 'event_name', $data)
when you mount the component which you want to pass the data from (either your product or currency).

1 Like
#3

Switch of the currency (I guess) should affect any component with “money” in currency. And I guess you want to persist some inputs otherwise page reload could be a reasonable option.

As suggested above you can emit an event (like “curencyChange”) to all subscribers that have money amounts, they also should have a public property $currency. See events:

1 Like
#4

Thanks for the ^^ replies! I’ll be messing with it on the weekend. I think the main issue is that I have two Livewire components and I misunderstood how they should communicate with each other and not how @ghostzero911 said:

It will only accessible if the Blade component is inside Livewire component render view

I think the event emitting is what I am after. I’ll let you know if I run into any issues. Thanks again.