livewire 元件的使用

liaosp發表於2021-01-06
元件

在這裡插入圖片描述

元件的使用在日常的前端框架開發中很普遍了，vue，react 用起來很爽。這邊介紹用 laravel+livewire開發元件。

在這裡插入圖片描述
在這裡插入圖片描述

比如上圖中的小卡片，可能會在多個幾面中使用，這時我們們可以使用同一個元件。

實現的方式有兩種：

第一種

 <livewire:app.app-card :application="$application" >

這種方式需要在 Livewire的類中，mount 接收 $application 的值，如下：

class AppCard extends Component
{

    public $application;

    public function mount($application){
        $this->application = $application;
    }
    public function render()
    {
        return view('livewire.app.app-card');
    }
}

view層可呼叫$application的資料。

注意：mount 方法傳參需要和模版 :application 名字一樣，而且不要有下劃線獲取其他符號。

第二種（amazing！）

這種方式就是比較麻煩一點，但是用起來非常不錯， Jetstream 就是這麼幹的。

php artisan make:Provider LivewireComponentRegisterProvider

建立一個Provider 用來註冊元件到blade

    public function boot()
    {
        Blade::component('livewire.app.app-card', 'app-card');
    }

這邊說一個小技巧，<livewire:app.app-card > 寫到後面感覺名字很長是不是，可以註冊到livewire，可以重新命名你喜歡短小精悍的名字

    public function register()
    {
        Livewire::component('appcard', AppCard::class);
    }

你就可以在頁面中這樣寫：

 <livewire:appcard :application="$application" >

所以我們在頁面中體現第二種方式是這樣的：

              <x-app-card :application="$application">
                <x-slot name="button">
                    <button>選擇應用</button>
                </x-slot>
              </x-app-card>

這樣就不需要在卡片類中mount接受引數了，直接傳到了子元件中

如果卡片中有不一樣的地方可以用laravel 的 插槽去處理差異。比如：發現我上面截圖中第一個頁面有按鈕，第二個頁面中沒有使用按鈕，slot和好的解決了元件的差異。

往期文章：
Laravel livewire 學習資源集合
livewire 驗證

和我做朋友？

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章