Nesting Components

Component nesting is very powerful technique, but there are a few moments to be aware of:

Nested components can accept parameters/values from their parents, however they're not reactive. In other words, if a state of a nested component changed, an update to other components has to me manually triggered via Wire Events.
Wire Components should not be used for extracting snippets into separate files(code/organizational). This is to avoid unneeded processing. A new theme element or SDC component would be the way to go.

Here is an example of a nested component called add_node from another Wire component's view.

<div>

  {% for nodeTypeId, nodes in nodesByType %}
  
    <h2>{{ nodeTypes[nodeTypeId].label }}</h2>
    
    {% for node in nodes %}
    
      <h3>{{ node }}</h3>
      
    {% endfor %}
    
    <hr>
    
    {{ wire('add_node', {'type': nodeTypeId}) }}
    
  {% endfor %}
  
</div>

We're passing the nodeTypeId as type to our nested Wire components which is used as an unique identifier and should be added as a value for wire:key attribute.

<div wire:key="{{ type }}">

  <h2>Create a node of type {{ type }}</h2>
  
  <input type="text" wire:model.title.defer="title">
  
  <button wire:click="createNode">Create</button>
  
</div>

See wire_demo_create_nodes repo for full example.

Introduction