laravel 将变量从组件传递到插槽

Passing variable from component into a slot

提问by HubertNNN

Is it possible to pass a variable from component into a slot. Here is an example:

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

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

Current result :

当前结果：

Exception : $entity is not defined

例外：$entity 未定义

Expected result:

预期结果：

<h1>Slider title</h1>
<ul>
    <li>Slider content no 0</li>
    <li>Slider content no 1</li>
    <li>Slider content no 2</li>
</ul>

• How can I pass the $entity variable into the slide slot?
• Is it even possible to do so?
• If not, are there any alternatives?

• 如何将 $entity 变量传递到幻灯片插槽中？
• 甚至有可能这样做吗？
• 如果没有，有没有其他选择？

采纳答案by Kalabasa

It seems that there is no way to pass data from a component to a slot context. It is also the case with @section/@yield.

似乎没有办法将数据从组件传递到插槽上下文。这也是与本案@section/ @yield。

What I've discovered is the @eachfunction. https://laravel.com/docs/5.6/blade#rendering-views-for-collections

我发现的是@each函数。https://laravel.com/docs/5.6/blade#rendering-views-for-collections

You'd need to have another view partial for the list item content (called itemhere).

您需要为列表项内容创建另一个视图部分（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>

Example: making a new slider with different content:

示例：制作具有不同内容的新滑块：

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

回答by Konrad Kalemba

UPDATE:I created a package adding scoped slots feature to Blade. Your problem is a perfect use-case for the scoped slots and it can be easily resolved using them. Check it out.

更新：我创建了一个包，为 Blade 添加了作用域插槽功能。您的问题是作用域插槽的完美用例，使用它们可以轻松解决。检查一下。

---

---

I struggled with the same problem and finally I found a way to "pass" variables from component to slot. The trick is to use @verbatimdirective which makes blade code not compile. Therefore we're able to pass blade code to a slot and then compile it in our component. However there is only one condition -- the name of variable used in foreachloop has to be the same as the one used in the slot. (As shown in the example below -- the slideslot uses $entityvariable and so does the foreachloop in the component)

我遇到了同样的问题，最后我找到了一种将变量从组件“传递”到插槽的方法。诀窍是使用@verbatim使刀片代码无法编译的指令。因此，我们能够将刀片代码传递到插槽，然后在我们的组件中编译它。但是只有一个条件——foreach循环中使用的变量名必须与槽中使用的变量名相同。（如下例所示——slide插槽使用$entity变量，foreach组件中的循环也是如此）

index.blade.php

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

滑块.blade.php

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

It is a little "hacky" solution to the problem but most importantly it does the job as you can see on the screenshot below.

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

回答by Narayan Adhikari

We can try with different way. Here, how I executed.

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

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