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.
Components should not be used for extracting snippets into separate files. This is to avoid unneeded processing.

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