Actions

介绍

Livewire 中操作的目标是能够轻松地侦听页面交互，并在Livewire组件上调用方法（重新渲染该组件）。

基本用法如下：

ShowPost.php

use Livewire\Component;

class ShowPost extends Component
{
    ...

    public function addLike()
    {
        $this->post->addLikeBy(auth()->user());
    }

    public function render()
    {
        return view('livewire.show-post');
    }
}

show-post.blade.php

<div>
    ...

    <button wire:click="addLike">Like Post</button>
</div>

Livewire当前提供了一些指令，使监听浏览器事件变得 So Easy! 通用格式是：wire:[dispatched browser event]="[action]"。

以下是您可能需要收听的一些常见事件：

以下是每个HTML的一些示例：

click

<button wire:click="doSomething">Do Something</button>

keydown

<input wire:keydown.enter="doSomething">

submit

<form wire:submit.prevent="save">
    ...

    <button>Save</button>
</form>

您可以侦听要绑定的元素调度的任何事件。 假设您有一个元素分配了一个名为“ foo”的浏览器事件，您可以像这样监听该事件：<button wire:foo="someAction">

传递动作参数

您可以直接在表达式中将额外的参数传递给Livewire操作，如下所示：

<button wire:click="addTodo({{ $todo->id }}, '{{ $todo->name }}')">Add Todo</button>

传递给操作的额外参数将作为标准 PHP 参数传递给组件的方法：

public function addTodo($id, $name)
{
    ...
}

如果您的操作需要任何应通过Laravel依赖项注入容器解决的服务，则可以在任何其他参数之前将它们列出：

public function addTodo(TodoService $todoService, $id, $name)
{
    ...
}

事件修饰符

就像您在 keydown 示例中看到的那样，Livewire 指令有时会提供 modifiers 来为事件添加额外的功能。 以下是可用于任何事件的修饰符。

Keydown 修饰符

要在 keydown 事件中监听特定的按键，您可以将按键的名称作为修饰符传递。 您可以将通过KeyboardEvent.key 公开的任何有效键名直接用作修饰符，将其转换为 kebab-case 格式即可。

以下是您可能需要的一些常见的修饰符：

<input wire:keydown.page-down="foo">

在上面的示例中，仅当event.key等于’PageDown’时才调用处理程序。

魔术方法

在Livewire中，有些“魔术” Actions 通常以“ $”符号为前缀：

您可以将它们作为事件侦听器的值传递，以在Livewire中执行特殊操作。

让我们以 $set() 为例。 它可用于手动设置组件属性的值。 考虑 Counter组件的视图。

Before

<div>
    {{ $message }}
    <button wire:click="setMessageToHello">Say Hi</button>
</div>

After

<div>
    {{ $message }}
    <button wire:click="$set('message', 'Hello')">Say Hi</button>
</div>

请注意，我们不再直接调用 setMessageToHello 函数，而是直接指定要将数据设置为什么。