Question

是否可以将组件中的变量传递到插槽中。这是一个例子：

{{-- 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>

目前的结果：

例外：$ entity未定义

预期结果：

<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变量传递到幻灯片插槽？
甚至可以这样做吗？
如果没有，还有其他选择吗？

Answer 1

似乎没有办法将数据从组件传递到插槽上下文。 @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>

Answer 2

我们可以尝试不同的方式。在这里，我是如何执行的。

＆＃13;

{{-- 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>

＆＃13;

Answer 3

更新：我创建了一个程序包，在Blade中添加了作用域插槽功能。您的问题是范围内插槽的完美用例，使用它们可以轻松解决。 Check it out。

我遇到了同样的问题，最后我找到了一种将变量从组件“传递”到插槽的方法。诀窍是使用@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>

这是一个解决问题的“ hacky”解决方案，但最重要的是，它可以完成工作，如下面的屏幕截图所示。

将变量从组件传递到插槽

3 个答案: