将变量从组件传递到插槽

Posted 2023-02-23

【中文标题】将变量从组件传递到插槽

【英文标题】：Passing variable from component into a slot

【发布时间】：2018-11-04 16:01:39

【问题描述】：

是否可以。 这是一个例子：

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

【问题讨论】：

你实际得到的结果是什么？

返回一个异常，说明 $entity 没有定义。

【参考方案1】：

更新：我创建了一个包，将作用域插槽功能添加到 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”解决方案，但最重要的是它可以完成工作，如下面的屏幕截图所示。

【参考方案2】：

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

【讨论】：

我喜欢你的解决方案，它类似于我的解决方法，但看起来比@foreach($entities as $entity) @include('components.slider.slide.' . $type, ['entity' => $entity]) @endforeach更紧凑

【参考方案3】：

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

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

【讨论】：

好吧，但这与首先使用插槽的目的不符。我的目标是使用滑块视图来处理滑动的过程，然后将特定的内容/ div 放入其中。这样我可以重用滑块逻辑来构建包含不同内容的滑块，一个包含用户列表，另一个包含*** cmets，另一个包含图像。