Laravel Livewire：通过单击按钮加载 livewire 组件答案

【问题标题】：Laravel Livewire: load livewire component with button clickLaravel Livewire：通过单击按钮加载 livewire 组件
【发布时间】：2021-08-21 07:47:11
【问题描述】：

有 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 文档，但无法找到如何实现它。提前致谢。

【问题讨论】：

标签： php laravel laravel-livewire livewires

【解决方案1】：

我会将您的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 以在它们之间切换，您需要做的就是在相关$emit 的某处添加另一个button。

【讨论】：

【解决方案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 的默认值设置为可见。

【讨论】：

【解决方案3】：

您可以采取的另一种方法是设置 self 属性并在刀片中创建相应的 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;
}

【讨论】：