如何通过livewire / laravel中的父组件到子组件创建动态的公共属性和数据？

如何解决如何通过livewire / laravel中的父组件到子组件创建动态的公共属性和数据？

在Laravel 8应用程序中，我有两个组件。 Input.php和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'" />的属性，然后我希望将其传递给{{1} }公共属性input.php，它将与自己模板上的$model指令绑定。

我是livewire的新手，一段时间以来没有使用PHP，所以我可能走错了路。我已经考虑过事件，但是不确定这是否正确。

我正在尝试使livewire中的子组件具有动态性，以便其父模板可以定义其反应性并将其值传回以进行评估...

我检查了livewire文档，并查看了laracast和其他各种laravel论坛上相关但不完全相同的文章，但没有结果。我还与办公室的PHP专家进行了交谈，他们说这在技术上是可行的，但我可能会受到livewire如何实现其生命周期事件的限制。

再次感谢您向我提供有关文档或正确指导的信息。

编辑： 我发现：绑定嵌套数据

在livewire网站https://laravel-livewire.com/docs/2.x/properties上 但这对我来说不起作用...有没有人可以显示（使用我的代码作为此工作的示例？）

解决方法

我已经获得了期望的结果，我的父组件现在根据子项的更改做出反应。

根据他们的文档，这在Livewire中不是自动的：

嵌套组件 Livewire支持嵌套组件。组件嵌套可能是一种非常强大的技术，但是有一些陷阱值得一提：

嵌套组件可以接受其父级的数据参数，但是它们不像Vue组件中的props那样反应灵敏。 Ĵ 这意味着我需要用事件的键和值传播我自己的事件，而这是我需要父母了解的事情。

我是通过在模板中添加明确设置密钥的方式来实现的。

    @livewire('general.input',['key' => 'eventName'])

注意：由于标记样式不适用于这种方法（我不知道为什么），因此我不得不更改为刀片样式语法。

然后将其输入到Inputs公共属性$key中。
在传播事件以让父项正在修改哪个键时使用。

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>

为简洁起见，有些值经过硬编码。