如何通过livewire/laravel中的父组件到子组件创建动态的公共属性和数据? [英] How can I create dynamic public properties and data via a parent component to a child component in livewire / laravel?
问题描述
在Laravel 8应用程序中，我有两个组件. Input.php 和 Form.php
In a Laravel 8 application I have two components. Input.php and Form.php
Input.php
<?php
namespace App\Http\Livewire\General;
use Livewire\Component;
class Input extends Component
{
public $name;
public $model;
public $label;
public function render()
{
return view('livewire.general.input');
}
}
input.blade.php
<div class="mt-3">
<label
for="{{ $name }}"
class="sr-only"
>
$label
</label>
<input
wire:model="{{ $model }}"
id="{{ $name }}"
placeholder="{{ $label }}"
autocomplete="off"
class="w-100 text-lg leading-6 text-gray-500 border border-grey-500 px-4 py-2 rounded"
/>
@error($name)
<p class="text-red-500 mt-1">{{ $message }}</p>
@enderror
</div>
Form.php
<?php
namespace App\Http\Livewire\Event;
use Livewire\Component;
class Form extends Component
{
public $eventName;
public function render()
{
return view('events.livewire.form');
}
}
form.blade.php
<form wire:submit.prevent="submit" method="POST">
@csrf
<livewire:general.input
:name="'event-name'"
:label="'Event Name'"
:model="'eventName'"
/>
</form>
如您所见，我正在尝试使用从 form.php $ eventName 传递到输入组件< livewire:general.input中的属性:model ="'eventName'"/> 然后，我希望将其传递给 input.php 公共属性 $ model ，该属性将与 wire:model关联指令放在自己的模板上.
As you can see I am trying to use a property passed from the form.php $eventName into the input component <livewire:general.input :model="'eventName'" /> This then I would expect to be passed to the input.php public property $model which would be tied to the wire:model directive on it's own template.
我是livewire的新手，一段时间以来没有使用PHP，所以我可能走错了路.我已经考虑过事件，但是不确定这是否正确.
I'm very new to livewire and haven't used PHP in some time so I may be on the wrong path. I have considered events but am not sure if this is the correct approach.
我正在尝试使livewire中的子组件具有动态性，以便其父模板可以定义其反应性并将其值传回以进行评估等.
I am trying to have a child component in livewire be dynamic so it's parents template can define it's reactive properties and pass their values back up for evaluation ect...
我检查了livewire文档，并查看了laracasts和其他各种laravel论坛上的相关但不完全相同的文章，但没有结果.我还与我办公室的PHP专家进行了交谈，他们说这在技术上是可行的，但我可能会受到livewire如何实现其生命周期事件的限制.
I have checked the livewire docs and viewed related but not exactly alike articles on laracasts and various other laravel forums with no result. I have also talked with PHP experts in my office and they say this is technically possible but I may be restricted by how livewire is implementing it's lifecycle events.
再次感谢您向我提供有关文档或正确指导的信息.
Again any information pointing me to documentation or in the right direction is appreciated.
我发现:绑定嵌套数据
在livewire网站上 https://laravel-livewire.com/docs/2.x/properties 但是，对于我而言，这不起作用...有没有人可以显示(使用我的代码作为此工作的示例?)
on the livewire site https://laravel-livewire.com/docs/2.x/properties However this does not work in my case... Is there anyone that can show ( using my code an example of this working? )
推荐答案
我已经获得了期望的结果，我的父组件现在根据子项更改做出反应.
I have got the desired result my parent component now reacts based on child changes.
根据他们的文档，这在Livewire中不是自动的:
This is not automatic in Livewire as per their documentation:
嵌套组件Livewire支持嵌套组件.组件嵌套可能是一种非常强大的技术，但是有一些陷阱值得一提:
Nesting Components Livewire supports nesting components. Component nesting can be an extremely powerful technique, but there are a few gotchas worth mentioning up-front:
嵌套组件可以接受其父级的数据参数，但是它们不像Vue组件中的props那样反应灵敏.Ĵ这意味着我需要用事件的键和值传播我自己的事件，而这是我需要父母了解的事情.
Nested components CAN accept data parameters from their parents, HOWEVER they are not reactive like props from a Vue component. j This means I needed to propagate my own events with they key and value of what I needed the parent to know about.
我是通过在模板中添加显式设置密钥来完成此操作的.
I did this by adding explicitly setting the key in the template.
@livewire('general.input', ['key' => 'eventName'])
注意:由于标记样式不适用于这种方法(我不知道为什么)，因此我不得不更改为刀片样式语法.
Note: I had to change to the blade style syntax since the tag style does not work with this approach ( I do not know why ).
然后将其输入到Inputs公共属性 $ key 中.
在传播事件以使父项正在修改哪个键时使用.
This then feeds into the Inputs public property $key.
This is used when propagating the event to let the parent which key is being modified.
form.php
<?php
namespace App\Http\Livewire\Event;
use Livewire\Component;
class Form extends Component
{
public $eventName;
public $listeners = ['change' => 'change'];
public function change($data)
{
$this->{$data['key']} = $data['value'];
}
public function render()
{
return view('events.livewire.form');
}
}
form.blade.php
<form wire:submit.prevent="submit" method="POST">
@csrf
{{ $eventName }}
@livewire('general.input', ['key' => 'eventName'])
</form>
input.php
<?php
namespace App\Http\Livewire\General;
use Livewire\Component;
class Input extends Component
{
public $name = 'NAME';
public $model;
public $key;
public $label = 'LABEL';
public $listeners = ['change' => 'change'];
public function change()
{
$this->emitUp('change', [
'key' => $this->key,
'value' => $this->model
]);
}
public function render()
{
return view('livewire.general.input');
}
}
input.blade.php
<div class="mt-3">
<label
for="{{ $name }}"
class="sr-only"
>
{{ $label }}
</label>
<input
wire:keyup="change"
wire:model="model"
id="{{ $name }}"
placeholder="{{ $label }}"
autocomplete="off"
class="w-100 text-lg leading-6 text-gray-500 border border-grey-500 px-4 py-2 rounded"
/>
@error($name)
<p class="text-red-500 mt-1">{{ $message }}</p>
@enderror
</div>
为简洁起见，有些值经过硬编码.
Some values are hard coded for brevity.
这篇关于如何通过livewire/laravel中的父组件到子组件创建动态的公共属性和数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
