Laravel Livewire：通過單擊按鈕加載 livewire 組件

Question

有 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 doc，但無法找到如何實現它。 提前致謝。

Answer 1

我會將您的components包裝在一個component container ，並使用它來管理您的其他components的可見性。

組件容器.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以最初顯示，否則它默認為在mount function 中設置的active 。

@livewire('component-container')

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

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

為了方便起見，我只是將它們放在component-container中。

這種方法的一個好處是沒有if條件要管理，如果您添加更多要在它們之間切換的components ，您需要做的就是在某個地方添加另一個帶有相關$emit的button 。

Answer 2

解決此問題的一種方法是將所有偵聽器添加到每個組件並切換一個標志。 這里以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的默認值設置為可見。

Answer 3

您可以采取的另一種方法是設置 self 屬性並在刀片中制作相應的 livewire 指令，例如 if/else（假設所有內容都在整頁組件下，並且 model 綁定引用用戶模型）

<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;
}