Директива @aware
Директива @aware используется в Blade-шаблонах
для доступа к данным родительского компонента Livewire.
Она позволяет дочернему компоненту получать значения
свойств и вызывать методы родителя, не передавая их
явно через параметры компонента. Это особенно полезно
при работе с вложенными компонентами, где требуется
общий доступ к состоянию.
Синтаксис
@aware(['propertyName', 'anotherProperty' => 'default'])
Директива принимает массив имен свойств или ассоциативный массив с значениями по умолчанию для тех свойств, которые не найдены в родителе.
Пример
Давайте создадим родительский компонент с публичным
свойством $theme и дочерний компонент,
который будет использовать это свойство:
<?php
namespace AppLivewire;
use LivewireComponent;
class ParentComponent extends Component
{
public $theme = 'dark';
public function render()
{
return view('livewire.parent-component');
}
}
?>
<div>
<h2>Родительский компонент</h2>
<p>Текущая тема: {{ $theme }}</p>
<livewire:child-component />
</div>
<?php
namespace AppLivewire;
use LivewireComponent;
class ChildComponent extends Component
{
public function render()
{
return view('livewire.child-component');
}
}
?>
<div>
<h3>Дочерний компонент</h3>
@aware(['theme'])
<p>Тема из родителя: {{ $theme }}</p>
</div>
Результат выполнения кода:
<div>
<h2>Родительский компонент</h2>
<p>Текущая тема: dark</p>
<div>
<h3>Дочерний компонент</h3>
<p>Тема из родителя: dark</p>
</div>
</div>
Пример с значениями по умолчанию
Если свойство не найдено в родителе, можно указать значение по умолчанию. Давайте изменим дочерний компонент:
<div>
<h3>Дочерний компонент</h3>
@aware(['theme' => 'light', 'size' => 'medium'])
<p>Тема: {{ $theme }}</p>
<p>Размер: {{ $size }}</p>
</div>
Теперь дочерний компонент использует значение по умолчанию
для $theme и $size, если они не определены
в родителе:
<div>
<h3>Дочерний компонент</h3>
<p>Тема: light</p>
<p>Размер: medium</p>
</div>
Пример с методами родителя
Директива @aware также позволяет вызывать
публичные методы родительского компонента.
Добавим метод в родительский компонент:
<?php
namespace AppLivewire;
use LivewireComponent;
class ParentComponent extends Component
{
public $theme = 'dark';
public $counter = 0;
public function incrementCounter()
{
$this->counter++;
}
public function render()
{
return view('livewire.parent-component');
}
}
?>
<div>
<h2>Родительский компонент</h2>
<p>Счетчик: {{ $counter }}</p>
<livewire:child-component />
</div>
<div>
<h3>Дочерний компонент</h3>
@aware(['counter', 'incrementCounter'])
<p>Счетчик из родителя: {{ $counter }}</p>
<button wire:click="incrementCounter">
Увеличить счетчик
</button>
</div>
Теперь дочерний компонент может вызывать метод родителя для изменения состояния:
<div>
<h3>Дочерний компонент</h3>
<p>Счетчик из родителя: 1</p>
<button>
Увеличить счетчик
</button>
</div>
