Laravel 5 component & slot

了解 Laravel component 的進化。

@comonent 是 laravel 5.4 的新功能。參考 5.4 的教學影片筆記。

@component & @slot

component 可以讓 blade 引用 component blade 的 html 實作。
@component('ad') 會對應到 components/ad.blade，@slot('title') 會對應到該 component 的 {{ $title }} 變數。

welcome blade 是一個完整的 HTML 檔案。如果它想引入一個廣告元件可以這麼做：

welcome

//...
@component('ad')
    @slot('title')
        laravel 線上課
    @endslot
@endcomponent
//...

<div class="ad">
    <h1>{{ $title }}</h1>
    <p>最後倒數優惠</p>
</div>

這樣好像看不出什麼好處，我直接把 component 寫進去就好啦。

多個廣告的 welcome，或者其他頁面也要使用廣告元件的話：

//...
@component('ad')
    @slot('title')
        laravel 線上課
    @endslot
@endcomponent

@component('ad')
    @slot('title')
        Vue 線上課
    @endslot
@endcomponent
//...

如果我的網站廣告想要插入多個廣告，這樣就有點用了。component 讓我不用寫出同樣的 css class 和 "最後倒數優惠"。

多個 @slot

如果我的廣告要呈現不同內文或連到不同網址，可以用多個 slot。

welcome

//...
@component('ad')
    @slot('title')
        超好喝紅茶
    @endslot

    @slot('content')
        紅茶很好喝
    @endslot
@endcomponent

@component('ad')
    @slot('title')
        超好喝奶茶
    @endslot

    @slot('content')
        奶茶很好喝
    @endslot
@endcomponent
//...

dashboard

<div class="dashboard">
    <h1>{{ $title }}</h1>
    <p>{{ $content }}</p>
</div>

未綁定的內文與 {{ $slot }}

welcome

//...
@component('ad')
    @slot('title')
        laravel 線上課
    @endslot

    <div class="button">
        <a href="https://donate.me.com/">Buy Me a Coffee</a>
    </div>
@endcomponent
//...

<div class="ad">
    <h1>{{ $title }}</h1>
    <p>最後倒數優惠</p>

    {{ $slot }}
</div>

{{ $slot }} 綁定所有沒有指定的內容，除非 component 只有一個內容，不然不太好用。

Error Exception Undefined variable

component 裡 {{}} 如果沒有收到應該要有的變數會發生 Error Exception Undefined variable。
這時可以用 @if isset 做判斷：

welcome

//...
@component('ad')
    @slot('title')
        laravel 線上課
    @endslot

    @slot('button')
        <a href="https://donate.me.com/">Buy Me a Coffee</a>
    @endslot
@endcomponent
//...

<div class="ad">
    <h1>{{ title }}</h1>
    <p>最後倒數優惠</p>

    @if (isset($button))
        <div class="button">
            {{ $button }}
        </div>    
    @endif
</div>

component blade(ad) 先判斷調用它的 blade(welcome) 有沒有這個變數，有的話才呈現。

使用 {{}} 的預設是比較方便的方法： {{ $title or 'Default' }}