Вложенный компонент

Вложенный компонент в Livewire представляет собой компонент, который вызывается внутри другого компонента. Это позволяет разбивать сложный интерфейс на независимые части, каждая из которых управляет своей логикой и состоянием. Для внедрения вложенного компонента используется директива wire:key или Blade-синтаксис @livewire.

Синтаксис

<livewire:child-component />

Либо с передачей параметров:

<livewire:child-component :property="$value" />

Пример

Создадим родительский компонент, который будет выводить счетчик и вложенный компонент, отображающий сообщение:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ParentComponent extends Component
	{
		public $count = 0;
		
		public function increment()
		{
			$this->count++;
		}
		
		public function render()
		{
			return view('livewire.parent-component');
		}
	}
?>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ChildComponent extends Component
	{
		public $message = 'Hello from child!';
		
		public function render()
		{
			return view('livewire.child-component');
		}
	}
?>

<div>
	<h2>Parent Component</h2>
	<p>Count: {{ $count }}</p>
	<button wire:click="increment">+</button>
	
	<livewire:child-component />
</div>

<div>
	<h3>Child Component</h3>
	<p>{{ $message }}</p>
</div>

Результат выполнения кода:

<div>
	<h2>Parent Component</h2>
	<p>Count: 0</p>
	<button>+</button>
	<div>
		<h3>Child Component</h3>
		<p>Hello from child!</p>
	</div>
</div>

Пример

Передадим данные из родительского компонента во вложенный:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ParentComponent extends Component
	{
		public $count = 0;
		public $name = 'Article';
		
		public function increment()
		{
			$this->count++;
		}
		
		public function render()
		{
			return view('livewire.parent-component');
		}
	}
?>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ChildComponent extends Component
	{
		public $title;
		
		public function render()
		{
			return view('livewire.child-component');
		}
	}
?>

<div>
	<h2>Parent Component</h2>
	<p>Count: {{ $count }}</p>
	<button wire:click="increment">+</button>
	
	<livewire:child-component :title="$name" />
</div>

<div>
	<h3>Child Component</h3>
	<p>Title: {{ $title }}</p>
</div>

Результат выполнения кода:

<div>
	<h2>Parent Component</h2>
	<p>Count: 0</p>
	<button>+</button>
	<div>
		<h3>Child Component</h3>
		<p>Title: Article</p>
	</div>
</div>

Смотрите также

класс Component,
от которого наследуются все компоненты
метод render,
который возвращает шаблон компонента
передачу свойств в дочерний компонент,
которая позволяет передавать данные
класс Livewire,
который управляет регистрацией компонентов