如何在 Laravel / Blade 中做多个重复部分？

Question

好的，我正在设计一个标签视图组件。它具有可变数量的选项卡，具体取决于它的使用位置/方式。 我想做的是这个（简化）：

@component('tabSet')
   @component('tab', ['label' => 'settings', 'content' => 'nameOfContentComponent'])
   @component('tab', ['label' => 'stuff', 'content' => 'nameOfContentComponent'])
   @component('tab', ['label' => 'Other stuff', 'content' => 'nameOfContentComponent'])
  @component('tab', ['label' => 'And even more stuff', 'content' => 'nameOfContentComponent'])
@endcomponent

所需的输出看起来像这样：

<section class="tabSet">
        <div class="tabs-contentArea"> 
<!-- this section is repeated for each tab-->
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
 <!-- this section is repeated for each tab-->      
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
  <!-- this section is repeated for each tab-->        
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
  <!-- this section is repeated for each tab-->         
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
<!-- this section is repeated for each tab-->

        </div>
        <div class="tabs-tabArea">
<!-- this section is repeated for each tab-->
            <div class="tabs-tab"> 
                <label class="tabs-tab-label icon-skull" >settings</label>
            </div>
<!-- this section is repeated for each tab-->
            <div class="tabs-tab">
                <label class="tabs-tab-label-mobile icon-skull" >Stuff</label>
            </div>
<!-- this section is repeated for each tab-->
            <div class="tabs-tab">
                <label class="tabs-tab-label-mobile icon-skull">Other stuff</label>
            </div>
<!-- this section is repeated for each tab-->
            <div class="tabs-tab">
                <label class="tabs-tab-label-mobile icon-skull"  >And even more stuff</label>
            </div>
<!-- this section is repeated for each tab-->
        </div>
    </div>
</section>

我看不出如何将变量分成两个不同的重复部分，其中包含可变数量的选项卡（.tabs-contentArea-content 和 .tabs-tab-label）

我可以选择一个版本，在该版本中我加载相关变量的数组并使用两个 for 循环来生成这些部分，但这需要我执行类似

的操作

@component('tabSet', ['tabData' => 'fileWithArray'])@endcomponent

并将数组中的数据作为变量加载——这似乎不太干净，因为必须为每个选项卡集创建一个数组文件，而不仅仅是指定在构建视图时要创建哪些选项卡。

请就此事的最佳做法提出建议

最好的问候

大卫·特拉波

Answer 1

保持简单。组件不提供您想要的功能。 我建议使用：

@component('tabSet', ['tabs' => [
        'settings' => 'nameOfSettingsContentComponent',
        'stuff' => 'nameOfStuffContentComponent',
    ]])
@endcomponent

在 tabSet 中使用 foreach 两次

@foreach($tabs as $label => $componentName)
@endforeach