如何在点击时破坏 livewire 组件？

Posted 2023-02-22

【中文标题】如何在点击时破坏 livewire 组件？

【英文标题】：How to destroy livewire component on click?

【发布时间】：2021-01-06 08:40:09

【问题描述】：

我创建了一个带有一些输入字段的 livewire 组件，向父组件添加了一个 for 循环，其中包含子组件。

@for($i = 0; $i < $count; $i++)
    @livewire('dashboard.profile.garage-service-list-item', ['garage' => $garage], key($i))
@endfor

每个子组件都有一个删除按钮。这个按钮的方法怎么样？

【参考方案1】：

我想到了两种方法。一个是如果项目被删除，您将显示一个空视图，或者您触发一个事件以刷新在该循环中呈现的所有组件。

1：刷新父级

这假定父组件是 Livewire 组件。

在您的父级中，您可以侦听刷新自身的事件。只需在您的父组件（具有您的 @for 循环的组件）中声明一个侦听器，方法是添加以下内容。

protected $listeners = ['refreshParentComponent' => '$refresh'];

refreshParentComponent 是事件的名称，您可以将其重命名为更合适的名称（该名称可能不是一个好名称），$refresh 是动作——在 Livewire 中，$refresh 动作是一个神奇的动作，它只是简单地刷新整个组件，基本上是重新渲染它。这意味着您将在删除项目后获得一组新数据，并使用该数据呈现所有数据。

要触发事件，在您删除项目的Profile\GarageServiceListItem 类中，您可以触发或发出该特定事件 - 您可以向上发出它。您可以通过调用emitUp 方法来做到这一点。

$this->emitUp('refreshParentComponent');

2: 渲染一个空的 html 块

您可以向 Livewire 组件添加布尔属性，例如 public $show = true;。然后在 garage-service-list-item 视图的基础中，首先检查该属性。

<div>
    @if ($show) 
        <!-- The rest of your component here -->
    @endif
</div>

然后在删除组件的方法中，只需设置$this->show = false;即可！该组件将呈现一个空的<div> 块。

---

Livewire events Livewire properties