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

巴特西

component and slot

component and slot

最新文章

热门文章