如何使用Livewire 3在向导表单中创建动态表单字段

需求 #

我需要实现一个向导表单，支持用户生成多个动态输入字段并填写，提交后将数据存入数据库创建食谱实例。

遇到的问题 #

我搞不清动态输入字段的处理逻辑：

• 如果把分步表单和动态字段逻辑都放在单个Livewire组件里，代码会过于臃肿；
• 要是单独创建一个Livewire组件处理动态字段并嵌入向导表单，又不知道提交时如何从子组件获取数据；
• 不确定是否应该用Livewire处理动态字段，有人认为每次更新都触发服务器请求没必要，也有人建议用session，但我觉得session使用起来不方便。

预期功能流程 #

我已经创建了对应步骤的Livewire组件，表单工作流程如下：

1. 信息步骤（Step 1）：用户填写标准输入字段、上传图片、撰写食谱描述；
2. 食材步骤（Step 2）：默认显示一行包含「信息|数量|单位」的输入字段代表一种食材，点击「+」按钮可添加更多食材行；
3. 步骤指南（Step 3）：类似食材步骤，每行包含图片和描述输入字段代表一个烹饪步骤，支持点击「+」添加步骤，也可点击删除按钮移除指定步骤。

现有代码 #

class RecipeWizard extends Component
{
    public $form_step = 1;

    public $dishCategories;
    public $cuisines;
    public $menus;

    public function mount()
    {
        $this->dishCategories = DishCategory::get();
        $this->cuisines = Cuisine::get();
        $this->menus = Menu::get();
    }

    // 后续会从数据库获取
    public array $units = [
        'kg', 'g', 'piece',
        'head', 'liter', 'to taste',
        'bunche', 'twig', 'stem'
    ];

    public function next_step()
    {
         $this->form_step++;
    }

    public function prev_step()
    {
         $this->form_step--;
    }

    public function render()
    {
        return view('livewire.recipe-wizard');
    }
}

内容的提问来源于stack exchange，提问作者d.shved