【Laravel實戰】15分鐘搞懂Livewire的行動

Livewire 裡頭行動的目的是輕鬆的偵聽頁面的互動，並且呼叫你組件裡的方法，比如用來重新渲染組件。也就是說 Livewire 已經為你將前端元素.JS以及PHP程式之間搭起來溝通的橋樑，所以你可以便利的直接在元素的事件去註冊要呼叫的PHP函式

這是一個簡單的用法:

class ShowPost extends Component
{
    public Post $post;

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

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

Livewire當前提供一個好用的語法來讓偵聽瀏覽器事件變得更為簡單，它們的一般格式為：

wire:[發送瀏覽器事件]="[action]"

下面是一些比較常會需要偵聽的事件:

事件 語法 click wire:click
keydown wire:keydown
submit wire:submit

下面是一些HTML上的例子

<button wire:click="doSomething">Do Something</button>
<input wire:keydown.enter="doSomething">
<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)
{
    ...
}

當然，行動參數也支援型別提示來進行解析

use App/Http/Todo;

public function addTodo(Todo $todo, $name)
{
    ...
}

因此假如你的行動需要任何服務需要被 Laravel 的依賴注入容器進行解析，你能夠將類別名稱作為簽名寫在參數的前面

use App/Http/TodoService;
public function addTodo(TodoService $todoService, $id, $name)
{
    ...
}

事件修飾子

之前在 keydown 這個例子中有用到， Livewire 語句可結合修飾子來達到額外的事件功能，下面列出一些能夠被用任何事件的修飾子

修飾子 描述 stop 等同於 event.stopPropagation() prevent 等同於 event.preventDefault() self 只有在事件被自己觸發時才會派發行動，以避免外部元素抓取到子元素的事件 debounce.150ms 加入額外的指定延遲來處理行動

Keydown 修飾子

Keydown 修飾子在處理鍵盤相關的事件時會用到，為了偵聽 keydown 事件的指定按鍵，你能夠傳入按鍵名稱作為修飾子。你能夠直接透過 KeyboardEvent.key 作為修飾子來使用任何有效的按鍵名稱，以 kebab-case 的命名方式，以下列出一些較為常用的按鍵

原生瀏覽器事件 Livewire修飾子 Backspace backspace Escape backspace Shift shift Tab tab ArrowRight arrow-right

就舉個例子來說明好了，請看看這一個標籤

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

在上面的例子裡頭，處理器將只有在按鍵為 'PageDown' 時才被呼叫

目前根據我的測試只有在浮標專注在這個輸入項時按鍵輸入才會有作用，沒有那麼好用

魔術方法

在 Livewire 裡頭存在著一些魔術方法，名稱通常帶有錢符號作為前綴: 方法 描述 $refresh 將重新渲染組件而不需要發送任何行動 $set('property', value) 更新屬性值的語法糖 $toggle('property') 切換布林屬性值的語法糖 $emit('event', …params) 發送事件，可帶參數 $event 一個特殊的變數保存著觸發行動的事件實體

以下是魔法方法的使用說明

wire:change="setSomeProperty($event.target.value)"

你能夠傳入這些作為事件偵聽器的值來做一些特別的事，就舉 $set() 來說，這能讓你用來手動設定組件屬性的值，比如下面是一個計數器組件的視圖 之前寫法

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

新寫法

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

注意到嗎? 我們不再需要呼叫 setMessageToHello() ， 而是直接進行設值 ，一切變得更為直覺，超級方便的