[Livewire] 透過 Properties 傳遞資料

在 Laravel 使用 Livewire，只要在 Component 裡設定變數就可以在 blade 裡使用：

class Counter extends Component
{
  public $message = 'Hello World!';
}

在 blade 內使用：

{{$message}}

透過 mount 初始化資料：

class HelloWorld extends Component
{
    public $message;
    public function mount()
    {
        $this->message = 'Hello World!';
    }
}

也可以使用 fill() 一次設定多個變數：

public $message;
public function mount()
{
    $this->fill(['message' => 'Hello World!']);
}

Livewire 也提供 reset 的方法，可以讓在 input 有改變後，在重整時回復預設的值：

public $search = '';
public $isActive = true;

public function resetFilters()
{
    $this->reset('search');
    // Will only reset the search property.
    $this->reset(['search', 'isActive']);
    // Will reset both the search AND the isActive property.
}

透過 wire:model 可以綁定資料變化：

<div class="mb-2">
  <input type="text" class="form-control" wire:model="message">
</div>
<h2>{{$message}}</h2>

綁定巢狀結構的資料：

<input type="text" wire:model="parent.message">

Debouncing input：預設 livewire 的 debounce 是 150ms，可以透過以下方式修改這個值：

<input type="text" wire:model.debounce.500ms="name">

透過 lazy 修改監聽事件為 change 發生時，而不是有輸入就監聽：

<input type="text" wire:model.lazy="message">

如果你希望 model 的監聽事件是要執行某一件事情才去請求的話，可以使用 defer，像是這樣：

<input type="text" wire:model.defer="query">
<button wire:click="search">Search</button>

這樣 query 那個值就不會自動監聽他改變的內容，可以在 search 點即時觸發事件再去取得他更新的內容，降低 server 的負擔。