Передача переменной из компонента в слот - PullRequest
0 голосов
/ 25 мая 2018

Можно ли передать переменную из компонента в слот.Вот пример:

{{-- index.blade.php --}}
@component('slider', ['entities' => [0, 1, 2]])
    @slot('title')
        Slider title
    @endslot
    @slot('slide')
        Slider content no {{ $entity }}
    @endslot
@endcomponent


{{-- slider.blade.php --}}
<h1>{{ $title }}</h1>
<ul>
@foreach($entities as $entity)
    <li>{{ $slide }}</li>
@endforeach
</ul>

Текущий результат:

Исключение: $ сущность не определена

Ожидаемый результат:

<h1>Slider title</h1>
<ul>
    <li>Slider content no 0</li>
    <li>Slider content no 1</li>
    <li>Slider content no 2</li>
</ul>
  • Как передать переменную $ entity в слот слайда?
  • Возможно ли это сделать?
  • Если нет, есть ли альтернативы?

Ответы [ 3 ]

0 голосов
/ 09 июня 2018

Кажется, что нет способа передать данные из компонента в контекст слота.Это также относится к @section / @yield.

. Я обнаружил функцию @each.https://laravel.com/docs/5.6/blade#rendering-views-for-collections

Вам потребуется другой частичный вид для содержимого элемента списка (здесь он называется item).

{{-- index.blade.php --}}
@component('slider', ['entities' => [0, 1, 2], 'item_view' => 'item'])
    @slot('title')
        Slider title
    @endslot
@endcomponent


{{-- item.blade.php --}}
<li>
  Slider content no $entity
</li>


{{-- slider.blade.php --}}
<h1>{{ $title }}</h1>
<ul>
  @each($item_view, $entities, 'entity')
</ul>

Пример: создание нового слайдера с другим содержимым:

{{-- gallery.blade.php --}}
@component('slider', ['entities' => ['a.png', 'b.png', 'c.png'], 'item_view' => 'gallery_item'])
    @slot('title')
        Gallery
    @endslot
@endcomponent


{{-- gallery_item.blade.php --}}
<li>
  <img src={{ $entity }} />
</li>
0 голосов
/ 05 июля 2019

ОБНОВЛЕНИЕ: Я создал пакет, добавляющий функцию слотов с заданной областью в Blade.Ваша проблема - идеальный вариант использования слотов с заданной областью действия, и ее можно легко решить, используя их. Проверьте это .


Я столкнулся с той же проблемой и, наконец, нашел способ "передать" переменные из компонента в слот.Хитрость заключается в том, чтобы использовать директиву @verbatim, которая не позволяет компилировать блейд-код.Поэтому мы можем передать блейд-код в слот, а затем скомпилировать его в нашем компоненте.Однако есть только одно условие - имя переменной, используемой в цикле foreach, должно совпадать с именем, используемым в слоте.(Как показано в примере ниже - в слоте slide используется переменная $entity, как и в цикле foreach в компоненте)

index.blade.php

@component('slider', ['entities' => [0, 1, 2]])
  @slot('title')
    Slider title
  @endslot

  @slot('slide')
    @verbatim
      Slide {{ $entity }}

      @if ($entity === 0) {{-- Directives also work! --}}
        <strong>Special slide</strong>
      @endif
    @endverbatim
  @endslot
@endcomponent

slider.blade.php

<h1>{{ $title }}</h1>
<ul>
  @foreach($entities as $entity)
    <li>{!! eval('?>'.Blade::compileString($slide)) !!}</li>
  @endforeach
</ul>

Это немного «хакерское» решение проблемы, но самое главное, оно выполняет свою работу, как вы можете видеть наскриншот ниже.

The result of the code above

0 голосов
/ 25 мая 2018

Мы можем попробовать другим способом.Вот, как я выполнил.

{{-- index.blade.php --}}
@component('slider', ['entities' => [0, 1, 2]])
      @slot('title')
          Slider title
      @endslot
      @slot('slide')
          Slider content no 
      @endslot
  @endcomponent

                    
{{-- slider.blade.php --}}                    
<h1>{{ $title }}</h1>
<ul>
@foreach($entities as $entity)
    <li>{{ $slide }} {{ $entity }}</li>
@endforeach
</ul>
...