How can I create dynamic public properties and data via a parent component to a child component in livewire / laravel?

问题

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>

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.

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.

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

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.

Edit: I found: Binding Nested Data

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? )

回答1:

I have got the desired result my parent component now reacts based on child changes.

This is not automatic in Livewire as per their documentation:

Nesting Components Livewire supports nesting components. Component nesting can be an extremely powerful technique, but there are a few gotchas worth mentioning up-front:

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 ).

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.

来源：https://stackoverflow.com/questions/64379725/how-can-i-create-dynamic-public-properties-and-data-via-a-parent-component-to-a

标签

php

laravel

laravel-livewire