Laravel（Livewire）中的组件拆分和保留参数

Posted 2023-03-14

【中文标题】Laravel（Livewire）中的组件拆分和保留参数

【英文标题】：component split and keep parameters in Laravel(Livewire)

【发布时间】：2021-04-09 20:22:18

【问题描述】：

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

Q.2）在这种情况下，有没有办法将参数从子组件传递和保持到父组件？

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>

【参考方案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 编码愉快~！！ :)