wire:click

Livewire 提供了一个简单的 wire:click 指令，用于在用户单击页面上的特定元素时调用组件方法（也称为操作）。

例如，给定下面的 ShowInvoice 组件：

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Invoice;

class ShowInvoice extends Component
{
    public Invoice $invoice;

    public function download()
    {
        return response()->download(
            $this->invoice->file_path, 'invoice.pdf'
        );
    }
}

当用户单击"下载发票"按钮时，你可以通过添加 wire:click="download" 触发上面类中的 download() 方法：

<button type="button" wire:click="download"> <!-- [tl! highlight] -->
    Download Invoice
</button>

异步请求

默认情况下，Livewire 在同一组件作用域内序列化操作：如果一个操作正在进行中，后续操作将排队，直到当前请求完成。

在 wire:click 上添加 .async 修饰符允许操作并行运行，而不是排队。当你想要触发多个请求而无需等待前一个完成时（例如：批处理后台操作、乐观 UI 或快速触发按钮），这很有用。

<button type="button" wire:click.async="process">Process</button>

在链接上使用 wire:click

在 <a> 标签上使用 wire:click 时，必须附加 .prevent 以防止浏览器中链接的默认处理。否则，浏览器将访问提供的链接并更新页面的 URL。

<a href="#" wire:click.prevent="...">

深入了解

wire:click 指令只是 Livewire 中许多可用事件监听器之一。有关其（和其他事件监听器）功能的完整文档，请访问 Livewire 操作文档页面。