如何解决Laravel 中的组件拆分并保留参数Livewire
Q.1) 我想将具有多个输入字段的表单拆分为大约 5 个组件,因为有很多输入字段和 UX 原因。我正在考虑一个屏幕,它填写表单的所有内容,直到最后一个组件,并将输入值保存到服务器。最好的方法是什么?只用刀片会更好吗?
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>
解决方法
答案
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 编码愉快~!! :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。