Nesting Components
// wires/ContactUs.bx
class extends="cbwire.models.Component" {
data = {
"showForm": false
};
}
<!--- wires/contactus.bxm --->
<bx:output>
<div>
<bx:if showForm>
<!--- Nested component --->
#wire( name="ContactForm" )#
</bx:if>
<button wire:click="$toggle( 'showForm' )">Toggle form</button>
</div>
</bx:output>
You can also pass parameters.
// wires/ContactUs.bx
class extends="cbwire.models.Component" {
data = {
"showForm": false,
"sendEmail": false,
"validateForm": true
};
function onMount( params ) {
data.sendEmail = params.sendEmail;
data.validateForm = params.validateForm;
}
}
<!--- wires/contactus.bxm --->
<bx:output>
<div>
<bx:if showForm>
#wire(
name="ContactForm"
params={
sendEmail: true,
validateForm: true
}
)#
</bx:if>
<button wire:click="$toggle( 'showForm' )">Toggle form</button>
</div>
</bx:output>
Using Keys with Nested Components
When nesting components, it's important to provide a key to help Livewire understand what's changed when components are updated. This is particularly crucial when you have dynamic nested components that may be added or removed from the DOM.
Why Keys Matter
Livewire treats each nested component as an island, meaning that each child component is truly its own separate UI component with its own data properties and functionality. Refreshing the parent does not automatically refresh the child components. However, sometimes you want to remove or delete child components entirely. The key
parameter is what Livewire looks at to determine if a child component still exists or if it should be removed from the DOM.
Without keys, when a parent component refreshes, Livewire may not properly identify which nested components have changed, leading to unexpected behavior or components not being properly cleaned up.
Basic Key Usage
<!--- wires/contactus.bxm --->
<bx:output>
<div>
<bx:if showForm>
<!--- Using a key helps Livewire track this nested component --->
#wire( name="ContactForm", key="contact-form-#generateUUID()#" )#
</bx:if>
<button wire:click="$toggle( 'showForm' )">Toggle form</button>
</div>
</bx:output>
Dynamic Keys for Component Lists
When rendering multiple nested components dynamically, use unique keys to help Livewire track each component individually:
// wires/PostList.bx
class extends="cbwire.models.Component" {
data = {
"posts": [
{ "id": 1, "title": "First Post" },
{ "id": 2, "title": "Second Post" },
{ "id": 3, "title": "Third Post" }
]
};
function removePost(postId) {
data.posts = data.posts.filter(function(post) {
return post.id != arguments.postId;
});
}
}
<!--- wires/postlist.bxm --->
<bx:output>
<div>
<bx:loop array="#posts#" index="post">
<!--- Each nested component gets a unique key based on the post ID --->
#wire(
name="PostCard",
params={ "post": post },
key="post-#post.id#"
)#
</bx:loop>
</div>
</bx:output>
Key Guidelines
Use unique identifiers: Base keys on database IDs, UUIDs, or other unique values
Keep keys stable: Don't use random values that change on each render unless you are wanting the child component to load new on every parent refresh
Be descriptive: Use meaningful key names like
"user-#userID#"
or"form-#formType#"
Required for dynamic lists: Always use keys when rendering nested components in loops
Essential for conditional rendering: Use keys when components are conditionally displayed
Keys must be unique across all nested components on the page, not just within a single parent component. Duplicate keys can cause rendering issues and unpredictable behavior.
Last updated
Was this helpful?