Директива @island

Директива @island предназначена для создания изолированного блока в шаблоне Livewire. Она позволяет выполнять фрагмент кода вне основного цикла обновления компонента, что полезно для тяжелых вычислений или работы с внешними данными. В тело директивы передается замыкание, которое выполняется при рендеринге. Результат возвращается в виде строки и вставляется в шаблон. Это позволяет снизить нагрузку на основной компонент.

Синтаксис

@island($closure)

Пример

Давайте используем @island для форматирования текущей даты:

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

<div>
	<p>
		Current date:
		@island(function() {
			return date('Y-m-d H:i:s');
		})
	</p>
</div>

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

<div>
	<p>
		Current date:
		2026-09-08 14:30:00
	</p>
</div>

Пример

Теперь используем @island для генерации случайного числа:

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

<div>
	<p>
		Random number:
		@island(function() {
			return rand(1, 100);
		})
	</p>
</div>

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

<div>
	<p>
		Random number:
		42
	</p>
</div>

Пример

В @island можно передавать аргументы из компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class GreetingComponent extends Component
	{
		public $name = 'World';
		
		public function render()
		{
			return view('livewire.greeting-component');
		}
	}
?>

<div>
	<p>
		@island(function($name) {
			return 'Hello, ' . $name . '!';
		}, $name)
	</p>
</div>

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

<div>
	<p>
		Hello, World!
	</p>
</div>

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

директиву @this,
которая ссылается на текущий компонент в JavaScript
директиву @script,
которая позволяет выполнить JavaScript-код в компоненте
директиву @placeholder,
которая задает временное содержимое на время загрузки
директиву @aware,
которая позволяет получить доступ к данным родительского компонента