Атрибут :prop

Атрибут :prop в Livewire используется для передачи данных из родительского компонента в дочерний. Он аналогичен передаче обычных свойств в Blade-компоненты, но с той разницей, что данные автоматически синхронизируются с состоянием родительского компонента. В качестве значения указывается имя свойства родительского компонента, перед которым ставится двоеточие для динамической передачи.

Синтаксис

<livewire:child-component :prop="$parentProperty" />

Пример

Давайте создадим родительский компонент с числом $num и передадим его в дочерний компонент через атрибут :prop:

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

<div>
	<h3>Parent component</h3>
	<p>num: {{ $num }}</p>
	
	<livewire:child-component :prop="$num" />
</div>

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

<div>
	<h4>Child component</h4>
	<p>prop: {{ $prop }}</p>
</div>

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

<div>
	<h3>Parent component</h3>
	<p>num: 10</p>
	
	<div>
		<h4>Child component</h4>
		<p>prop: 10</p>
	</div>
</div>

Пример

Передадим в дочерний компонент массив данных:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ParentComponent extends Component
	{
		public $items = [1, 2, 3, 4, 5];
		
		public function render()
		{
			return view('livewire.parent-component');
		}
	}
?>

<div>
	<h3>Parent component</h3>
	
	<livewire:child-component :prop="$items" />
</div>

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

<div>
	<h4>Child component</h4>
	<ul>
		@foreach ($prop as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<h3>Parent component</h3>
	
	<div>
		<h4>Child component</h4>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</div>

Пример

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

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

<div>
	<h3>Parent component</h3>
	
	<livewire:child-component :prop="$text" />
</div>

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

<div>
	<h4>Child component</h4>
	<p>prop: {{ $prop }}</p>
</div>

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

<div>
	<h3>Parent component</h3>
	
	<div>
		<h4>Child component</h4>
		<p>prop: abcde</p>
	</div>
</div>

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

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