component and slot

使用：

1.component panel

<article class="message">
  <div class="message-header">
    <p>Hello World</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
  </div>
</article>

2.其中header和body需要传入变量

<article class="message">
  <div class="message-header">
    <p>{{$title}}</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    {{$content}}
  </div>
</article>

3.views.components.index 中 需要引用component模版panel

@component('components.panel')
    @slot('title')
        hello world
    @endslot
    @slot('content')
        have a nice day
    @endslot
@endcomponent

4.如果要传入默认content

panel.blade.php修改如下：

 <article class="message">
    <div class="message-header">
      <p>{{$title}}</p>
      <button class="delete" aria-label="delete"></button>
    </div>
    <div class="message-body">
      {{$slot}}
    </div>
  </article>

index.blade.php修改如下

@component('components.panel')
    @slot('title')
        hello world
    @endslot
        have a nice day
@endcomponent

//可多来几个：

@component('components.panel')
    @slot('title')
        hello world
    @endslot
    have a nice day123
@endcomponent

5.还可以这样给默认值：title默认为laravel

panel.blade.php修改如下：

     <article class="message">
        <div class="message-header">
          <p>{{$title ?? 'laravel'}}</p>
          <button class="delete" aria-label="delete"></button>
        </div>
        <div class="message-body">
          {{$slot}}
        </div>
      </article>
index.blade.php修改如下

    @component('components.panel')
            have a nice day
    @endcomponent