Belajar Laravel Livewire : Komponen Livewire

Assalamualaikum Warohmatulloh Wabarokatuh, setelah kita menginstal Laravel Livewire berikutnya kita akan membuat komponen pada Laravel Livewire.

Membuat Komponen Livewire

Setelah instalasi Laravel Livewire pada perintah artisan akan ada beberapa perintah yang ditambahkan oleh Laravel Livewire. Semua perintah menggukan command / perintah livewire:perintah. Untuk membuat komponen kita bisa menggunakan perintah livewire:make tapi untuk kemudahan atau kesamaan perintah dalam pembuatan file lainnya di Laravel, tersedia juga perintah make:livewire.

php artisan livewire:make SomeComponent
# atau
php artisan make:livewire SomeComponent

Livewire juga mendukung penulisan dengan kebab case.

php artisan livewire:make some-component
# atau
php artisan make:livewire some-component

Setelah eksekusi perintahnya, akan ada dua file yang terbuat dalam proyek.

app/Http/Livewire/SomeComponent.php

resources/views/livewire/some-component.blade.php

Jika ingin membuat komponen di dalam subdirektori kita bisa gunakan beberapa perintah.

php artisan make:livewire Some\\Component
php artisan make:livewire Some/Component
php artisan make:livewire some.component

Sekarang, komponennya terbuat pada lokasi ini.

app/Http/Livewire/Some/Component.php‘

resources/views/livewire/some/component.blade.php

Inline Components

Jika kita ingin membuat komponen tanpa file .blade.php. Kita bisa tambahkan --inline pada perintah.

php artisan make:livewire SomeComponent --inline

Sekarang hanya akan ada satu file yang terbuat.

app/Http/Livewire/SomeComponent.php

Isinya kurang lebih seperti ini.

class SomeComponent extends Component
{
    public function render()
    {
        return <<<'blade'
            <div></div>
        blade;
    }
}

Merender Komponen

Cara paling mudah untuk merender komponen Livewire menggunakan kode berikut.

<div>
    <livewire:some-component />
</div>

Alternatif lainnya bisa juga menggunakan Blade directive

@livewire('some-component')

Jika kita memiliki komponen yang berada dalam sebuah direktori dan Namespace gunakan notasi titik (.) untuk mengaksesnya.

Misalnya kita punya komponen SomeComponent yang berada dalam Namespace app/Http/Livewire/Folder kita akan panggil seperti ini.

<livewire:folder.some-component />

Parameter

Mengirimkan Parameter

Kita bisa mengirim dat ke dalam komponen dengan mengirimkan parameter tambahan ke dalam tag <livewire:.

Sebagai contoh kita akan mengirimkan data dari model $user ke dalam komponsen some-component.

<livewire:some-component :user="$user">

Jika menggunakan Blade directive kita bisa mengirimkan parameter seperti ini.

@livewire('some-component', ['user' => $user])

Menerima Parameter

Livewire akan secara otomatis memberikan nilai parameter ke properti public yang cocok.

Contohnya dalam kasus ini <livewire:some-component :user="$user">, jika komponen memiliki properti bernama $user maka akan otomatis memberikan nilainya.

class SomeComponent extends Component
{
    public $user;

    ...
}

Entah karena alasan apa mungkin cara otomtatis tersebut tidak berfungsi di tempat kawan kawan (saya pernah mengalami). Kita bisa intersep parameter menggunakan method mount().

class SomeComponent extends Component
{
    public $name;
    public $email;

    public function mount($user)
    {
        $this->name = $post->name;
        $this->email = $post->email;
    }

    ...
}

Dalam komponen Livewire kita menggunakan method mount() sebagai ganti dari sebuah class constructor __construct() yang biasa kita gunakan.

Seperti controller ktia juga bisa inject dependencies dengan menambahkan parameter dengan type-hint sebelum mengirimnya.

use \Illuminate\Session\SessionManager;

class SomeComponent extends Component
{
    public $name;
    public $email;

    public function mount(SessionManager $session, $user)
    {
        $session->put("user.{$user->id}.last_logged_in", now());

        $this->name = $user->name;
        $this->email = $user->email;
    }

    ...
}

Full Page Component

Komponen biasanya merepresenstasikan bagian kecil dari sebuah halaman. Tapi jika kita ingin menggunakan komponen Livewire sebagai bagian utama halaman, kita bisa mengirim komponen Livewire langsung ke dalam route Laravel layaknya sebuah controller.

Route::get('/user', SomeComponent::class);

Secara default Livewire akan merender komponen SomeComponent ke dalam {{ $slot }} dari layout blade yang ada pada :

resources/views/layouts/app.blade.php

<head>
    @livewireStyles
</head>
<body>
    {{ $slot }}

    @livewireScripts
</body>

Parameter Route

Seringkali kita membutuhkan akses ke parameter route di dalam method controller. Karena kita tidak sedang menggunakan controller, Livewire mencoba untuk menirukan kebiasaan ini melalui method mount().

Route::get('/user/{id}', SomeComponent::class);

class ShowPost extends Component
{
    public $user;

    public function mount($id)
    {
        $this->user = User::find($id);
    }

    ...
}

Seperti yang bisa kita lihat, method mount() pada komponen Livewire bertindak seperti methode pada controller. Jika kita mengunjungi /user/92, maka variabel $id yang dikirim pada method mount() akan memiliki nilai 92.

Route Model Binding

Seperti yang kita harapkan, komponen Livewire mengimpilementasikan semua fungsionalitas yang kita gunakan di controller Laravel termasuk juga route model binding.

Route::get('/user/{user}', SomeComponent::class);

class ShowPost extends Component
{
    public $user;

    public function mount(User $user)
    {
        $this->user = $user;
    }
}

Jika menggunakan PHP 7.4, kita juga bisa menggunakan typehint class properties dan Livewire akan secara otomatis melakukan route-model binding. Properti $user berikut ini akan otomatis di inject tanpa menggunakan method mount().

class SomeComponent extends Component
{
    public User $user;
}

Namun saya sempat mengalami hal tersebut tidak berjalan secara otomatis dan saya tetap butuh method mount().

public function mount()
    {
        $this->user = new User();
    }

Sekian pembahasan tentang komponen pada Laravel Livewire, semoga bermanfaat.

Wassalamualaikum Warohmatulloh Wabarokatuh.