Livewire 中文文档

主题

wire:click ​

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

例如，给定以下 ShowInvoice 组件：

php
<?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() 方法：

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

传递参数 ​

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

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

当按钮被点击时，delete() 方法将会被调用，并传入文章的 ID。

不要信任操作参数

操作参数应该像 HTTP 请求输入一样对待，不应被信任。在更新数据之前，始终要验证所有权。

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

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

阻止重新渲染 ​

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

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

保持滚动位置 ​

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

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

并行执行 ​

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

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

深入了解 ​

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

另请参阅 ​

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

参考 ​

blade
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并行执行操作而非排队