1

有 3 个 livewire 组件UserIsExpired，每个组件分别有 3 个按钮UserIsActive。UserIsPending单击按钮时，它应该将先前的组件替换为其相应的组件。

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

4

3 回答 3

3

我会将您包装components在 a 中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>

组件容器.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。

于 2021-06-03T14:21:47.287 回答
0

解决此问题的一种方法是将所有侦听器添加到每个组件并切换一个标志。这里以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为可见。

于 2021-06-03T07:53:10.087 回答
0

您可以采取的另一种方法是设置 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;
}
于 2021-06-03T13:35:13.120 回答