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 的地方，有一個按鈕點了會加總了。