Livewire 是讓後端也可以很輕鬆做前後端溝通與互動的套件，我們透過實作看看他有多好用。
首先在專案利用 composer 安裝 livewire：
composer require livewire/livewire
接著透過指令建立 livewire 的 component：
php artisan make:livewire counter
上述指令會產生兩個檔案：
- app/Http/Livewire/Counter.php
- resources/views/livewire/counter.blade.php
Counter.php 會長這樣：
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public function render()
{
return view('livewire.counter');
}
}
而 counter.blade 那邊目前則是空的。
在要讀入 livewire component 的像這樣讀入：
<head>
...
@livewireStyles
</head>
<body>
<livewire:counter />
...
@livewireScripts
</body>
</html>
在 Counter 那隻增加變數以及事件：
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}
這邊就設計一個 function，執行後會讓 count++ 這樣，然後再修改 counter.blade：
<div>
<button class="btn btn-info" wire:click="increment">+</button>
<h1>{{ $count }}</h1>
</div>
這樣就能看到你放 component 的地方，有一個按鈕點了會加總了。
![[CI] 在 CodeIgniter 設定預設時區](/assets/upload/1598766168885_0.jpg)
![[PHP] 透過 PDO 取得 query 之後的資料筆數- rowCount()](/assets/upload/1590906011930_0.jpg)
![[WordPress] 替文章列表增添分頁按鈕- the_posts_pagination()](/assets/upload/1613481490813_0.png)
