Correct way to pass data from block to magewire component underneath

[Kizbo]

What is the best approach to do that? For example, i have some kind of array inside my block, that was passed on the creation of this block in php, then i want to access that data in magewire component attached to this block - should I do this in phtml, or by any other means?

[wpoortman]

Hi @Kizbo,

This isn't really best practice because the Magewire block should be in charge when it comes to providing data. But I can imagine at some point to want to set data onto the Magewire component.

I can think of a couple of options:

• Use the wire:init directive to call a component method when the block is being initialized. Downside of using this method is that it will make a XHR request right at the start.
• You have the $magewire variable to your disposal. You can just define data as how you would define it with a ViewModel or Block. A Magewire component is just a kind of ViewModel in the end.

$magewire->setSomeDataOntoMyProtectedProperty('hello', 'world')

Just like you would do in a ViewModel.

Let me know if this helps!

[Kizbo]

Hi, thanks for the quick reply.
I agree with you that magewire component should be the one providing data - but how can i pass this data in this scenario?:
I have some kind of a tree structure, that is rendering child blocks dynamically based on number of items inside that tree:

foreach ($item['items'] as $subItem)
                    echo $block->getLayout()
                        ->getBlock("categories.item")
                        ->setData("item", $subItem)
                        ->toHtml();

In this case, how can i pass "$subItem" to the magewire component inside this block?

[wpoortman]

Question 1: Just to clarify, all category items need to become a single Magewire component right? If so, what's your overall goal to make them a separate component instead of wrapping it with one Magewire component?

Question 2: Does categories.item have a "magewire" argument? I can imagine this component is called CategoryChild or CategoryItem. If it does, you can try to grep the component from the block and set data onto it before you echo it.

[Kizbo]

Hm, i imagined this as follows:
I have a Categories Components, that wraps all of the items and handles some of the dispatching and collecting data,

• Categories Component
• • CategoryItem Component 1
• • CategoryItem Component 2
• • ...

inside the Categories Component, i render a loop of all categories, every category would be its own component, containing its own data.
I just wanted to separate them, but perhaps my logic here is wrong

[Kizbo]

To clarify - each item would be a single type of Magewire component, just different instances

[wpoortman]

It really depends on the goal for each item. If it needs to do something dynamic specific for a single component, you can pass the data along to the magewire component during render, but I would recommend wrapping the Categories component into a Magewire component and let this component handle requests from items.

<!-- Category item -->
<div wire:key="<?= $itemId ?>">
    <button type="button" wire:click="methodInMyParentComponent('foo', 'bar')">Do something</button>
</div>

[Kizbo]

Perhaps you are right, i will go this way. Thank you very much for help