Nesting Components
Compose complex interfaces by nesting LiVue components.
Basic Nesting
Render child components inside a parent component's template.
parent.blade.php
<div>
<h1>Parent Component</h1>
@livue('child')
<livue:child />
</div>Passing Data to Children
Pass initial data to child components via props.
Parent Template
<livue:user-card
:user="$user"
:editable="true"
/>
Child Component
public User $user;
public bool $editable = false;Reactive Props
Use #[Reactive] to keep parent and child properties in sync.
Parent
class Parent extends Component
{
public string $selected = '';
}
<livue:selector
:value="$selected"
/>
Child
class Selector extends Component
{
#[Reactive]
public string $value = '';
}
Note: When the child updates $value, the parent's $selected is automatically updated too.
Two-Way Binding with #[Modelable]
Create components that work like form inputs with v-model.
DatePicker Component
class DatePicker extends Component
{
#[Modelable]
public string $value = '';
}
Usage
<livue:date-picker
model="startDate"
/>Slots
Pass content to child components using slots.
Parent
<livue:modal>
<livue:slot:header>
My Title
</livue:slot:header>
<p>Modal content here</p>
</livue:modal>
Modal Template
<div class="modal">
<header>
{!! $slots['header'] !!}
</header>
<main>
{!! $slot !!}
</main>
</div>