Livewire 如何更新组件并重新渲染视图中的内容的说明

Question

我有一个 Livewire 组件，它加载基于

$step

变量的动态组件。这个想法是根据变量的值加载三个组件之一。当用户单击按钮时，变量会更新。

<div class="flex-1 flex flex-col">
    <livewire:reservation.progress />

    <livewire:dynamic-component :component="'reservation.step' . $step" />

    <div class="block text-right">
        <x-button wire:click="nextStep" type="button" title="{{ __( 'Next' ) }}" class="bg-lime-400 rounded px-6 py-2.5 text-center text-nowrap text-slate-900 border border-slate-900 hover:text-white hover:bg-slate-900 transition-colors duration-300">
            <i class="fa-solid fa-right-long"></i>
        </x-button>
    </div>
</div>

nextStep函数的实现是这样的：

public function nextStep(): void
{
    $this->step += 1;
    if ( $this->step > 3 ) {
        $this->step = 1;
    }
}

我的问题是......为什么当用户单击按钮时动态组件没有更新。组件改变时不应该刷新吗？

Answer 1

Livewire 3 的语法是：

<livewire:dynamic-component :is="$componentName" :key="$uniqueKey" />

或者，另一种选择：

<livewire:is :component="$componentName" :key="$uniqueKey" />

：键是强制性的