Laravel Livewire：单击按钮加载 livewire 组件

如何解决Laravel Livewire：单击按钮加载 livewire 组件

有 3 个 livewire 组件 UserIsExpired、UserIsActive 和 UserIsPending，每个组件有 3 个按钮。当一个按钮被点击时，它应该用它各自的组件替换之前的组件。

<button wire:click="$emit(active)">{{ __('Active') }}</button>
<button wire:click="$emit(pending)">{{ __('Pending') }}</button>
<button wire:click="$emit(expired)">{{ __('Expired') }}</button>

在视图中

<livewire:user-is-active :active="$active"/>
<livewire:user-is-pending :pending="$pending"/>
<livewire:user-is-expired :expired="$expired"/>

组件示例

class UserIsExpired extends Component
{
    protected $listeners = ['expired'];    
    public function render()
    {
        return <<<'blade'
            <div>
                {{-- The best athlete wants his opponent at his best. --}}
            </div>
        blade;
    }
}

当 Active 按钮被点击时，它应该加载 UserIsActive 组件。其他两个也一样。

我一直在寻找 livewire 文档，但找不到如何实现它。提前致谢。

解决方法

我会将您的 components 包装在 component container 中，并使用它来管理您的另一个 components 的可见性。

component-contaoner.blade.php

<div>
    <h4>Component Container</h4>

    {{-- this is your dynamic component --}}
    @livewire($component,key($key))

    <button wire:click="$emit('switch','active')">
        {{ __('Active') }}
    </button>

    <button wire:click="$emit('switch','pending')">
        {{ __('Pending') }}
    </button>

    <button wire:click="$emit('switch','expired')">
        {{ __('Expired') }}
    </button>
</div>

ComponentContainer.php

class ComponentContainer extends Component
{
    private $component = '';

    protected $listeners = [
        'switch'
    ];

    public function switch(string $component)
    {
        $this->component = $component;
    }

    public function mount(string $component = 'active')
    {
        $this->component = $component;
    }

    public function render()
    {
        return view('livewire.component-container',[
            'component' => $this->component,// key is required to force a refresh of the container component
            'key' => random_int(-999,999),]);
    }
}

然后您可以按如下方式使用 component container，传入一个可选的 component 以进行初始显示，否则默认为 active，如 mount 函数中设置的那样。>

@livewire('component-container')

您可以将 buttons 放在任何您想要使用的地方

$emitTo('container-component','switch','active')

为了方便起见，我只是将它们放在 component-container 中。

这种方法的一个好处是没有 if 条件需要管理，如果您添加更多 components 来切换，您需要做的就是在某处添加另一个 button相关的 $emit。

,

解决此问题的一种方法是将所有侦听器添加到每个组件并切换标志。以下是 UserIsExpired 的示例：

class UserIsExpired extends Component
{
    public $state = 'invisible';

    protected $listeners = [
        'active','pending','expired',];

    public function active()
    {
        $this->state = 'invisible';
    }

    public function pending()
    {
        $this->state = 'invisible';
    }

    public function expired()
    {
        $this->state = 'visible';
    }

    public function render()
    {
        if ($this->state === 'invisble') {
            return '';
        }

        return <<<'blade'
            <div>
                {{-- The best athlete wants his opponent at his best. --}}
            </div>
        blade;
    }
}

对于最初可见的组件，您可能希望将 state 的默认值设置为可见。

,

您可以采取的另一种方法是设置 self 属性并在 Blade 中创建相应的 livewire 指令，如 if/else（假设所有内容都在整页组件下并且模型绑定引用用户模型）

<button wire:click="showNested('active')">{{ __('Active') }}</button>
<button wire:click="showNested('pending')">{{ __('Pending') }}</button>
<button wire:click="showNested('expired')">{{ __('Expired') }}</button>

在视图中

@if($show == 'isActive')
   <livewire:user-is-active :active="$active"/>
@elseif($show == 'isPending')
   <livewire:user-is-pending :pending="$pending"/>
@elseif($show == 'isExpired')
   <livewire:user-is-expired :expired="$expired"/>
@endif

在组件中

public $active,$pending,$expired;
public $show = '';

public function render()
{
   if(!empty($this->show)){
      if($this->show == 'active')
         $this->active = User::where('status','active')->first();
      elseif(....)
        //......
   }
   return view(.....) //......;  
}

public function showNested($value)
{
   $this->show = $value;
}