Директива aware
Директива aware используется в Blade-компонентах Laravel для передачи данных из родительского компонента в дочерний. Она позволяет автоматически связывать свойства родительского компонента с дочерним, упрощая обмен данными между компонентами. Директива принимает имя свойства родительского компонента, которое нужно передать, и присваивает его переменной в дочернем компоненте.
Синтаксис
<x-parent-component>
<x-child-component @aware(['propertyName']) />
</x-parent-component>
Для использования директивы необходимо указать массив имён свойств, которые должны быть доступны в дочернем компоненте.
Пример
Рассмотрим простой пример передачи свойства 'message' из родительского компонента в дочерний:
<?php
namespace AppViewComponents;
use IlluminateViewComponent;
class ParentComponent extends Component
{
public $message;
public function __construct($message)
{
$this->message = $message;
}
public function render()
{
return view('components.parent-component');
}
}
?>
<div>
<h2>Parent Component</h2>
<p>Message: {{ $message }}</p>
<x-child-component @aware(['message']) />
</div>
<?php
namespace AppViewComponents;
use IlluminateViewComponent;
class ChildComponent extends Component
{
public function render()
{
return view('components.child-component');
}
}
?>
<div>
<h3>Child Component</h3>
<p>Received message: {{ $message }}</p>
</div>
Результат выполнения кода:
<div>
<h2>Parent Component</h2>
<p>Message: Hello from parent</p>
<div>
<h3>Child Component</h3>
<p>Received message: Hello from parent</p>
</div>
</div>
Пример
Пример передачи нескольких свойств через директиву aware:
<?php
namespace AppViewComponents;
use IlluminateViewComponent;
class MainComponent extends Component
{
public $title;
public $description;
public function __construct($title, $description)
{
$this->title = $title;
$this->description = $description;
}
public function render()
{
return view('components.main-component');
}
}
?>
<div>
<h2>{{ $title }}</h2>
<p>{{ $description }}</p>
<x-sub-component @aware(['title', 'description']) />
</div>
<div>
<h3>Sub Component</h3>
<p>Title from parent: {{ $title }}</p>
<p>Description from parent: {{ $description }}</p>
</div>
Результат выполнения кода:
<div>
<h2>Main Title</h2>
<p>Main description</p>
<div>
<h3>Sub Component</h3>
<p>Title from parent: Main Title</p>
<p>Description from parent: Main Description</p>
</div>
</div>
