Поле id класса Component

Каждый экземпляр компонента Livewire при рендеринге получает уникальный идентификатор. Этот идентификатор хранится в защищенном свойстве $id класса Component. Livewire автоматически генерирует этот идентификатор при инициализации компонента, но вы также можете задать его вручную через атрибут wire:id в шаблоне. Идентификатор используется для отслеживания состояния компонента на клиентской стороне и для связи между серверным и клиентским кодом.

Синтаксис

Для доступа к идентификатору внутри компонента используйте свойство $this->id. В Blade-шаблоне значение идентификатора можно вывести через {{ $this->id }} или использовать атрибут wire:id="value" для явного задания идентификатора.

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ExampleComponent extends Component
	{
		public function render()
		{
			// Получение идентификатора компонента
			$componentId = $this->id;
			
			return view('livewire.example-component');
		}
	}
?>

Пример

Давайте создадим компонент, который выводит свой уникальный идентификатор как в PHP-коде, так и в шаблоне:

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

<div>
	<p>Component ID (from PHP): {{ $this->getComponentId() }}</p>
	<p>Component ID (from Blade): {{ $this->id }}</p>
	<button wire:click="increment">Increment</button>
	<p>Counter: {{ $num }}</p>
</div>

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

<div>
	<p>Component ID (from PHP): "1234567890"</p>
	<p>Component ID (from Blade): "1234567890"</p>
	<button>Increment</button>
	<p>Counter: 0</p>
</div>

Пример

Давайте явно зададим идентификатор компонента через атрибут wire:id в корневом элементе шаблона:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class CustomIdComponent extends Component
	{
		public $text = 'article';
		
		public function render()
		{
			return view('livewire.custom-id-component');
		}
	}
?>

<div wire:id="custom-main">
	<p>Custom ID: {{ $this->id }}</p>
	<p>Text: {{ $text }}</p>
</div>

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

<div>
	<p>Custom ID: "custom-main"</p>
	<p>Text: "article"</p>
</div>

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

класс Component,
базовый класс для всех Livewire-компонентов
метод render,
который возвращает шаблон компонента
публичные свойства public-prop,
которые определяют состояние компонента
атрибут slot,
который определяет именованные слоты в компоненте