Событие $parent
Событие $parent в JavaScript-секции Livewire предоставляет доступ к родительскому компоненту из дочернего компонента. Это позволяет дочернему компоненту вызывать методы родителя, получать и изменять его свойства, создавая гибкую архитектуру взаимодействия между вложенными компонентами.
Доступ к родительскому компоненту осуществляется через свойство $parent внутри JavaScript-контекста Livewire. Это свойство содержит ссылку на экземпляр родительского компонента, что позволяет выполнять различные операции с ним.
Синтаксис
this.$parent.methodName();
this.$parent.propertyName = value;
Пример
Давайте создадим родительский компонент с свойством $parentMessage и дочерний компонент, который будет обращаться к родительскому свойству:
<?php
namespace AppLivewire;
use LivewireComponent;
class ParentComponent extends Component
{
public $parentMessage = 'Hello from parent';
public function render()
{
return view('livewire.parent-component');
}
}
?>
<div>
<h3>Parent Component</h3>
<p>{{ $parentMessage }}</p>
<livewire:child-component />
</div>
<?php
namespace AppLivewire;
use LivewireComponent;
class ChildComponent extends Component
{
public $childMessage = 'Child component';
public function updateParent()
{
$this->dispatch('update-parent-message');
}
public function render()
{
return view('livewire.child-component');
}
}
?>
<div>
<h4>Child Component</h4>
<p>{{ $childMessage }}</p>
<button wire:click="updateParent">
Update Parent Property
</button>
</div>
<script>
Livewire.on('update-parent-message', function () {
this.$parent.parentMessage = 'Updated by child component';
}.bind(this));
</script>
Результат выполнения кода:
<div>
<h3>Parent Component</h3>
<p>"Updated by child component"</p>
<div>
<h4>Child Component</h4>
<p>"Child component"</p>
<button>Update Parent Property</button>
</div>
</div>
Пример
Вызов методов родительского компонента из дочернего:
<?php
namespace AppLivewire;
use LivewireComponent;
class ParentComponent extends Component
{
public $count = 0;
public function incrementCount()
{
$this->count++;
}
public function render()
{
return view('livewire.parent-component');
}
}
?>
<div>
<h3>Parent Component</h3>
<p>Count: {{ $count }}</p>
<livewire:child-component />
</div>
<?php
namespace AppLivewire;
use LivewireComponent;
class ChildComponent extends Component
{
public function callParentMethod()
{
$this->dispatch('call-parent-method');
}
public function render()
{
return view('livewire.child-component');
}
}
?>
<div>
<h4>Child Component</h4>
<button wire:click="callParentMethod">
Call Parent Method
</button>
</div>
<script>
Livewire.on('call-parent-method', function () {
this.$parent.incrementCount();
}.bind(this));
</script>
Результат выполнения кода:
<div>
<h3>Parent Component</h3>
<p>"Count: 1"</p>
<div>
<h4>Child Component</h4>
<button>Call Parent Method</button>
</div>
</div>
