组件拆分并在 Laravel(Livewire) 中保留参数

Question

Q.1) 我想将一个有多个输入字段的表单拆分成大约 5 个组件，因为有很多输入字段和 UX 原因。我正在考虑一个屏幕，它填写表单的所有内容直到最后一个组件并将输入值保存到服务器。最好的方法是什么？只使用 Blade 会更好吗？

Q.2) 在这种情况下，有什么方法可以将参数从 child 组件传递并保留到 parent 组件？

step1.php（组件）

class Step1 extends Component
{
    public $step = 1;
    public $step1DataTitle; //test reason
    public $step2DataTitle;
    public $step3DataTitle;
    public $step4DataTitle;
    public $step5DataTitle;
    public $step6DataTitle;

    protected $listeners = ['moveBack' => 'moveBack', 'moveNext' => 'moveNext'];

    public function render()
    {
        return view('livewire.sending.step1', ['step' => $this->step]);
    }

    public function moveBack()
    {
        $this->step = $this->step - 1;
    }

    public function moveNext()
    {
        $this->step = $this->step + 1;
    }

step1.blade.php

<div>
    @switch($step)
    @case(1)
    @livewire('sending.step1')
    @break
    @case(2)
    @livewire('sending.step2')
    @break
    @case(3)
    @livewire('sending.step3')
    @break
    @case(4)
    @livewire('sending.step4')
    @break
    @case(5)
    @livewire('sending.step5')
    @break
    @default
    @livewire('sending.default')
    @endswitch
</div>

每个视图文件都有方向按钮。 How to use $emitUp

<input wire:model="step5DataTitle"/> //test reason
  <div class="flex justify-between">
     <button wire:click="$emitUp('moveBack')"/>
     <button wire:click="$emitUp('moveNext')"/>
  </div>

Answer 1

答案

A.1) 我使用@include 指令而不是@switch 解决了它。 Laravel @include directive

//Component and each View file have directional buttons are same.

//View
@if($step === 1)
   @include('livewire.sending.step1')
@elseif($step === 2)
   @include('livewire.sending.step2')
@elseif($step === 3)
   @include('livewire.sending.step3')
@elseif($step === 4)
   @include('livewire.sending.step4')
@elseif($step === 5)
   @include('livewire.sending.step5')
@elseif($step === 6)
   @include('livewire.sending.step6')
@else
   <div>default step page</div>
@endif

**A.2) 配置代码为答案1，保留参数值。

祝您使用 Laravel 和 Livewire 编码愉快~!! :)

组件拆分并在 Laravel(Livewire) 中保留参数

component split and keep parameters in Laravel(Livewire)

laravel

laravel-blade

laravel-livewire

答案