Проброс атрибутов

Проброс атрибутов (Attribute Forwarding) в Livewire - это механизм, который позволяет передавать все HTML-атрибуты, указанные на корневом элементе компонента, внутрь его шаблона или на конкретный дочерний элемент. Это особенно полезно при создании переиспользуемых компонентов, таких как кастомные кнопки, инпуты или карточки, когда нужно сохранить возможность добавлять произвольные атрибуты (например, class, id, data-*) извне без изменения логики компонента.

Для проброса атрибутов в Livewire используется специальное свойство $attributes. Это свойство доступно в любом компоненте и содержит все атрибуты, переданные корневому элементу компонента при его использовании в Blade-шаблоне. Вы можете вывести это свойство в нужном месте шаблона с помощью {{ $attributes }}.

Синтаксис

Чтобы передать атрибуты компонента внутрь его шаблона, используйте вывод свойства $attributes в Blade-шаблоне компонента.

<!-- Использование компонента в родительском шаблоне -->
<livewire:my-button class="btn-primary" id="submit-btn" />

<!-- Внутри шаблона компонента -->
<button {{ $attributes }}>
	Click me
</button>

Пример

Создадим компонент кнопки, который принимает все переданные атрибуты и применяет их к элементу <button>.

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Button extends Component
	{
		public $text = 'Default';
		
		public function render()
		{
			return view('livewire.button');
		}
	}
?>

<button {{ $attributes }}>
	{{ $text }}
</button>

<div>
	<!-- Использование компонента с атрибутами -->
	<livewire:button text="Save" class="bg-blue-500" id="save-btn" />
	<livewire:button text="Cancel" class="bg-gray-300" id="cancel-btn" />
</div>

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

<div>
	<button class="bg-blue-500" id="save-btn">
		Save
	</button>
	<button class="bg-gray-300" id="cancel-btn">
		Cancel
	</button>
</div>

Пример

Если нужно пробросить атрибуты на конкретный дочерний элемент, а не на корневой, вы можете использовать свойство $attributes в любом месте шаблона. В этом примере атрибуты применяются к внутреннему элементу <input>, а корневой элемент получает только класс.

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class InputWrapper extends Component
	{
		public $label = '';
		
		public function render()
		{
			return view('livewire.input-wrapper');
		}
	}
?>

<div class="form-group">
	<label>{{ $label }}</label>
	<input {{ $attributes }}>
</div>

<livewire:input-wrapper
	label="Email"
	type="email"
	placeholder="Enter email"
	class="form-control"
/>

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

<div class="form-group">
	<label>Email</label>
	<input type="email" placeholder="Enter email" class="form-control">
</div>

Пример

Если нужно объединить переданные атрибуты с атрибутами, заданными внутри компонента, используйте метод merge. Это особенно полезно для классов, чтобы не потерять внутренние стили компонента.

<button {{ $attributes->merge(['class' => 'btn-default']) }}>
	{{ $text }}
</button>

<livewire:button text="Click me" class="btn-large" />

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

<button class="btn-default btn-large">
	Click me
</button>

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

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