Actions

未匹配的标注

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]"

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

Event Directive
click wire:click
keydown wire:keydown
submit wire:submit

以下是每个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 来为事件添加额外的功能。 以下是可用于任何事件的修饰符。

Modifier Description
stop 等价于 event.stopPropagation()
prevent 等价于 event.preventDefault()
self 仅在事件本身触发时才触发动作。 这样可以防止外部元素捕获从子元素触发的事件。 (通常是在模态背景下注册侦听器的情况下)
debounce.150ms 添加一个150毫秒的防抖动操作的处理。

Keydown 修饰符

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

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

Native Browser Event Livewire Modifier
Backspace backspace
Escape escape
Shift shift
Tab tab
ArrowRight arrow-right
<input wire:keydown.page-down="foo">

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

魔术方法

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

Function Description
$refresh 将重新渲染组件而无需执行任何操作
$set(‘property‘, value) 更新属性值的快捷方式
$toggle(‘property‘) 用于打开或关闭布尔属性的快捷方式
$emit(‘event‘, …params) 将使用提供的参数在全局事件总线上触发事件
$event 一个 特殊 变量,包含触发该动作的触发事件的值。 用法示例:wire:change="setSomeProperty($event.target.value)"

您可以将它们作为事件侦听器的值传递,以在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 函数,而是直接指定要将数据设置为什么。

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~