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

用户点击「Download Invoice」按钮时，可通过添加 wire:click="download" 触发上述类中的 download() 方法：

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

传递参数

你可以在 wire:click 指令中直接向操作传递参数：

<button wire:click="delete({{ $post->id }})">Delete</button>

点击按钮时，会用该文章的 ID 调用 delete() 方法。

WARNING

不要信任操作参数

操作参数应像 HTTP 请求输入一样对待，不可信任。更新数据前务必先授权校验归属。

在链接上使用

在 <a> 标签上使用 wire:click 时，必须追加 .prevent 以阻止链接的默认行为。否则浏览器会导航到所提供的 href。

<a href="#" wire:click.prevent="show">View Details</a>

阻止重新渲染

使用 .renderless 可在操作完成后跳过组件重新渲染。这对只执行副作用（如日志或分析）的操作很有用：

<button wire:click.renderless="trackClick">Track Event</button>

保留滚动位置

默认情况下，更新内容可能会改变滚动位置。使用 .preserve-scroll 可保持当前滚动位置：

<button wire:click.preserve-scroll="loadMore">Load More</button>

并行执行

默认情况下，Livewire 会在同一组件内排队执行操作。使用 .async 可让操作并行运行：

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

深入了解

wire:click 指令只是 Livewire 众多可用事件监听器之一。关于它（以及其他事件监听器）的完整能力，请参阅 Livewire 操作文档。

另见

• Actions — 组件操作完整指南
• Events — 从点击处理程序派发事件
• wire:confirm — 为操作添加确认对话框

参考

wire:click="methodName"
wire:click="methodName(param1, param2)"

修饰符

修饰符	说明
.prevent	阻止浏览器默认行为
.stop	停止事件冒泡
.self	仅当事件源于本元素时触发
.once	确保监听器只调用一次
.debounce	将处理程序防抖 250ms（可用 .debounce.500ms 自定义时长）
.throttle	将处理程序节流为至少每 250ms 一次（可用 .throttle.500ms 自定义）
.window	在 window 对象上监听事件
.document	在 document 对象上监听事件
.outside	仅监听元素外部的点击
.passive	不会阻塞滚动性能
.capture	在捕获阶段监听
.camel	将事件名转为驼峰命名
.dot	将事件名转为点号表示法
.renderless	操作完成后跳过重新渲染
.preserve-scroll	更新期间保持滚动位置
.async	并行执行操作而非排队