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

Question

在 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'" /> 的属性，然后我希望将其传递给 input.php 公共属性 $model绑定到它自己的模板上的wire:model 指令。

我对 livewire 很陌生，并且有一段时间没有使用过 PHP，所以我可能走错了路。我已经考虑过事件，但不确定这是否是正确的方法。

我试图让 livewire 中的子组件是动态的，因此它的父模板可以定义它的反应属性并将它们的值传回以进行评估等...

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

再次感谢任何指向文档或正确方向的信息。

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

在 livewire 网站上https://laravel-livewire.com/docs/2.x/properties 然而，这在我的情况下不起作用......有没有人可以展示（使用我的代码这个工作的例子？）

Answer 1

我得到了我想要的结果，我的父组件现在会根据子组件的变化做出反应。

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

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

嵌套组件可以接受来自其父级的数据参数，但是它们不像 Vue 组件中的 props 那样具有反应性。 j 这意味着我需要传播我自己的事件，其中包含我需要父母知道的关键和价值。

我通过在模板中添加显式设置键来做到这一点。

    @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>

为简洁起见，对某些值进行了硬编码。