时间戳

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

php - 如何通过父组件创建动态公共属性和数据到 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'" />然后我希望将其传递给input.php公共属性，该属性$model将绑定到wire:model它自己的模板上的指令。

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

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

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

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

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

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

标签： phplaravellaravel-livewire

解决方案

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

根据他们的文档，这在 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>

为简洁起见，有些值是硬编码的。

推荐阅读